Html 如何使用col-sm-3在引导中向网格的左侧和右侧添加填充，而不在网格框之间添加填充

我正在建立一个网站使用引导和更少

我有一个引导网格，虽然我知道如何使用CSS向左右添加填充，但我只希望填充位于第一个网格框的左侧和行中最后一个网格框的右侧。目前，一排流体中有4个。我希望它们保持在一行中，但要留一些空间，在页面边缘和网格行的开始/结束之间大约100px

我确实希望在每个网格框的信息/文本之间填充，但我希望在最左侧和最右侧填充更多的内容

此时，如果我将其添加到左侧和右侧，它显然会将其添加到网格行中每个长方体的左侧和右侧，使每个网格长方体之间的距离大于外侧的距离

我希望行和页面边缘之间有一个大的间隙，但每个网格框之间有一个小间隙

我试着在左侧网格框上创建一个类，并在CSS中设置填充，但它不能正常工作，它会将一个col-sm-3框移到其余框的下面

我也试过用边距代替填充，但它的效果是一样的

我是在做正确的事情，还是有更聪明的方法

我是新手，所以非常感谢您的帮助。谢谢

以下是我的部分代码：

HTML

---

谢谢大家

如果您需要使用

col-sm-3

类，那么一种方法是多使用一个类并使用此结构

HTML

<div class="row">
    <div class="col-sm-12">
       <div class="col-sm-3 inner_div">
          // your content here
       </div>
       <div class="col-sm-3 inner_div">
          // your content here
       </div>
       <div class="col-sm-3 inner_div">
          // your content here
       </div>
       <div class="col-sm-3 inner_div">
          // your content here
       </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12 clearfix">
       <div class="inner_div">
          // your content here
       </div>
       <div class="inner_div">
          // your content here
       </div>
       <div class="inner_div">
          // your content here
       </div>
       <div class="inner_div">
          // your content here
       </div>
    </div>
</div>

您还可以删除

col-sm-3

class“如果可能”并使用此html

HTML

<div class="row">
    <div class="col-sm-12">
       <div class="col-sm-3 inner_div">
          // your content here
       </div>
       <div class="col-sm-3 inner_div">
          // your content here
       </div>
       <div class="col-sm-3 inner_div">
          // your content here
       </div>
       <div class="col-sm-3 inner_div">
          // your content here
       </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12 clearfix">
       <div class="inner_div">
          // your content here
       </div>
       <div class="inner_div">
          // your content here
       </div>
       <div class="inner_div">
          // your content here
       </div>
       <div class="inner_div">
          // your content here
       </div>
    </div>
</div>

col-sm-12

main div上的类将为左侧和右侧提供填充，但不在网格之间

---

在引导程序中使用列，尤其是在引导程序4中使用列时，一个好的做法是不使用包含“.row”类的元素包装列。此元素应始终与具有正填充的父元素一起使用，例如：“.container、.container fluid和all”.col-*”，因为它具有带负值的填充

请看这个我放在上面的例子，或者用整页运行代码片段

我希望我帮了忙

p{
背景：#333；
颜色：#dddddd；
填充：1em；
文本对齐：居中；
}

项目-1

项目-2

项目-3

项目-1

项目-2

项目-3

项目-1

项目-2

项目-3

你到底想要什么..因为如果你在每个框中添加左侧和右侧的填充物，框之间自然会有填充物..难道没有办法在网格的外部添加更大的填充物吗？就像我上面所做的那样，它确实有效，但将我的第四个网格框向下推，从而创建了两行..基本上，只是在网格的左侧和右侧填充row我可以将行的宽度设置为80%或什么的吗？请检查下面的答案谢谢！这很有意义，我想！我只是在看到你的答案时对它进行了排序，我将网格中所有我想填充的边设置为div类，在CSS中我将宽度设置为90%，边距设置为10px。不，我认为你做得很好…我还是会b如果可能的话，我想看看你的页面，以便正确检查

<div class="row">
    <div class="col-sm-12 clearfix">
       <div class="inner_div">
          // your content here
       </div>
       <div class="inner_div">
          // your content here
       </div>
       <div class="inner_div">
          // your content here
       </div>
       <div class="inner_div">
          // your content here
       </div>
    </div>
</div>

.inner_div{
    float:left;
    width:25%;
}