代码之家 › 专栏 › 技术社区 › MK-DK

两列之间的填充,在其他位置影响填充

twitter-bootstrap css html

MK-DK · 技术社区 · 7 年前

我做了一行,有两列。在两列之间有一个30px的填充。我需要10倍。在bootply.com上查看一个实时示例 here .

在核心引导程序中,类“col-sm-4”具有 padding-left 和 padding-right 设为15px,因此为30px。我现在的问题是,我需要保持15像素在列的左边和右边。

如何使两列之间的填充变小,而不影响左右两侧的填充?

<style type="text/css">
    .row > div{
        margin-bottom: 15px;
    }
    .sidebar{
        background: #dbdfe5;
    }
    .content{
        background: #b4bac0;
    }
    .sidebar, .content{
        min-height: 300px;
    }
</style>

<body style="background-color: #4940fb;">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="sidebar"></div>
            </div>
            <div class="col-sm-8">
                <div class="content"></div>
            </div>
        </div>
    </div>
</body>

1 回复 | 直到 7 年前

Florin Simion 7 年前

您可以覆盖col-sm-4到7.5px的右边填充,以及col-sm-8到7.5px的左边填充。

Here 是代码笔示例。

但是,您需要小心,因为覆盖大型网站上的引导程序类可能会影响其他页面/部分。如果可以的话,你想给你的沙发床添加一些额外的类(比如col-sm-4和小的右填充,col-sm-8和小的左填充)。

所以你可以有这些规则:

.small-padding-left {
    padding-left:7.5px;
  }

  .small-padding-right {
    padding-right:7.5px;
  }

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前