如何在 Twitter Bootstrap 中正确删除第一行和最后一行元素的填充

Question

我使用 bootstrap 已经有一段时间了，我还是第一次遇到这个问题。我真的不知道该怎么做。我发现很多人建议只删除 first-child 元素和最后一个元素上的 padding-left。起初我也尝试过这种方式，但后来我意识到它不起作用，因为 .col 类具有 box-sizing: border-box; 属性，这使得 div 的宽度中包含填充。 （如果您想使用 width: 25%; 进行干净的布局，这显然是必要的）。

因此，如果您删除左侧的这些填充，第一个和最后一个 div 将大 15px，这会破坏布局...我希望每个 col div 具有完全相同的宽度，我希望它们适合100% 的行并且没有左右填充。在引导程序中是否有我不知道的类？

是否可以同时保留 Bootstrap 3 模板系统？

代码示例：

 <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
 </div>

Answer 1

我最终通过创建自己的类找到了解决方法，我相信尊重 bootstrap 制作布局系统的方式。这是最好和最简单的方法：

CSS

.layout-no-gutter-around.is-4-columns > .col-md-3{
   margin: 0 5px;
 }

.layout-no-gutter-around.is-4-columns > .col-md-3:first-child{
   margin-left: 0;
   padding-left: 0;
   width: calc(25% - 15px);
}

.layout-no-gutter-around.is-4-columns > .col-md-3:last-child{
   margin-right: 0;
   padding-right: 0;
   width: calc(25% - 15px);
}

HTML

 <div class="row layout-no-gutter-around is-4-colums">
   <div class="col-md-3"></div>
   <div class="col-md-3"></div>
   <div class="col-md-3"></div>
   <div class="col-md-3"></div>
 </div>

通过这种方式，我完全实现了我想要的，它是可重用的，并且尊重 Twitter 的 Bootstrap 思维（我相信）。感谢 Deja Vu 引导我进行计算，我相信这是实现这一目标的好方法。但是你不能在第一个孩子左边放置 15 个边距，在最后一个孩子右边放置 15 个边距，因为这仍然会在周围创建一个排水沟，但使用边距。

Answer 2

我无法解决您的问题，但我有 2 个想法，也许它会引导您找到解决方案。

1. 将paddings 替换为margins

html

<div class="row" id="optionOne">
  <div class="col-md-3">first child</div>
  <div class="col-md-3">child</div>
  <div class="col-md-3">child</div>
  <div class="col-md-3">last child</div>
</div>

css

#optionOne > div:first-child {
    background-color: red; /* for display purposes only */
    padding-left: 0px;
    margin-left: 15px;
}
#optionOne > div:last-child {
    background-color: yellow; /* for display purposes only */
    padding-right: 0px;
    margin-right: 15px;
}

不确定这是否能满足您的设计要求。

1. 重新计算宽度

css

@media (min-width: 992px) {
    #optionTwo > div:first-child {
        background-color: green; /* for display purposes only */
        padding-left: 0px;
    }
    #optionTwo > div:last-child {
        background-color: grey; /* for display purposes only */
        padding-right: 0px;
    }
    #optionTwo > div:not(:first-child):not(:last-child) {
        background-color: blue; /* for display purposes only */
        width: calc(25% + 15px);
    }
}

我面临的问题是 - 在这两种情况下，最后一个孩子都落在单独的行上： fiddle.

希望这能给你一些启发。

Answer 3

我无法对 Yann Chabot 的帖子发表评论，但作为对其的扩展，我建议使用转义值。如果你不使用这个，Chrome 会重新计算宽度为 10% 而不是正确的宽度。

CSS

width: calc(~"25% - 15px");