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

我使用bootstrap已经有一段时间了，这是我第一次面对这个问题。我真的不知道怎么做。我发现很多人建议只删除

第一个子元素和最后一个子元素上的
左填充。起初我也尝试过这种方法，但后来我意识到它无法工作，因为
.col
类具有
框大小：边框框宽度：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>

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

将
padding
s替换为
margin
s
html

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

再结晶宽度
css

我面临的问题是——在这两种情况下，最后一个孩子落在单独的一排：

希望这能给你一些思考的食物。
我最终找到了一种解决方法，创建了自己的类，我相信这是对bootstrap制作布局系统的尊重。以下是最好的、最简单的方法：

CSS

HTML



通过这种方式，我完全实现了我想要的，它是可重用的，并且尊重Twitter的引导思想（我相信）。多亏了似曾相识的人带领我找到了calc thiking，我相信这是实现这一目标的好方法。但是你不能在第一个孩子的左边加15个边距，在最后一个孩子的右边加15个边距，因为这仍然会在周围创建一个沟，但要使用边距。
我不能对Yann Chabot的帖子发表评论，但作为扩展，我建议使用转义值。如果不使用此选项，Chrome会将宽度重新计算为10%，而不是正确的宽度

CSS

嗯，是的，我有两个选择，在css中使用calc，我可能会对每个div应用25%+7.5px宽度，因为我必须从行中删除30px的总宽度。好主意。或者，如果我使用flexbox CSS3属性，它会工作得更好，尽管我有点破坏了引导浮动布局系统hmmm。我以前考虑过边距，但它似乎工作不正常，最后一个孩子掉到了另一排。。。好主意，你确定吗？我以前这样做过，它似乎在没有~符号的情况下工作？它错误地计算了父元素中的第一个子元素。我的第一个元素总是以10%的宽度出现，这为我修正了它。我最后不得不调整代码，因为我有一个可变数量的子项，我不必再使用css宽度线。这为我带来了窍门：
.layout-no-ground-around.is-4-columns>.col-md-3{padding:0 6px；}.layout-no-ground-around.is-4-columns>.col-md-3:nth child（4n+1）{padding left:0；}.layout-no-ground-ground.is-4-columns>.col-md-3:nth child（4n+4）{padding right:0；}
上述代码与col-md-3 css（浮动和宽度）结合使用
<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>

#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;
}

@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);
    }
}

.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);
}

 <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>

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