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

Question

我现在已经使用bootstrap了很长一段时间，而且我第一次遇到这个问题。我真的不知道该怎么做。我发现很多人建议只删除padding-left元素和最后一个元素上的first-child。我最初也尝试过这种方式但后来我意识到它无法工作，因为.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

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

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个保证金而在最后一个孩子身上留下，因为那样仍然可以创造一个排水沟但使用保证金。

Answer 2

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

1. 将padding替换为margin s

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");