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

Question

我正在建立一个使用Bootstrap和更少的网站。

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

我确实希望在每个网格框的信息/文本之间填充，但我希望在最左边和最右边有更大的数值。

现在，如果我把它加到左边和右边，显然会把它加到网格行中每个方框的左边和右边，使每个网格框之间的距离大于外边的距离。

我想要在行和页面边缘之间有一个很大的间隙，但在每个网格框之间有一个小间隙。

我试着在左边的网格框中创建一个类，并在CSS中设置填充，但它不能正常工作，它移动了其他框下面的col 3框中的一个。

我也尝试了边距而不是填充，但它做的是相同的事情。

我做的事情是对的还是错的，还是有更聪明的方法？

我是新手，所以任何帮助都非常感谢。谢谢。

下面是我的代码的一部分：

HTML

<div class="container-fluid">
<p class="lead text-center">
<div class="text-center">
    <H1>title title </H1></div>
</p>
<div class="row-fluid" >
    <div class="paddingleft">
    <div class="col-sm-3">
    <div class="text-center">
    <img src="assets/images/image2.png" >
    </div>
        <h3>title</h3>
        <p>info</p>
    </div>
    </div>
    <div class="col-sm-3">
    <div class="text-center">
    <img src="assets/images/image1.png" >
    </div>
        <h3>title</h3>
        <p> info
        </p>

    </div>
    <div class="col-sm-3">
    <div class="text-center">
    <img src="assets/images/image3.png" >
    </div>
        <h3>Title</h3>
<p>info </p>

    </div>

    <div class="col-sm-3">
    <div class="text-center">
    <img src="assets/images/image4.png" >
    </div>
        <h3>title</h3>
        <p>info</p>

    </div>

.whatwedo paddingleft {
padding-left:100px;
}

谢谢你们！

Answer 1

如果您需要使用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>

CSS

.inner_div{
   padding-left:0;
   padding-right:0;
}

“如果可能”，您还可以删除col-sm-3类并使用此

HTML

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

CSS

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

main div上的

col-sm-12类将向左和向右提供填充，但不会在网格之间提供填充。

Answer 2

在bootstrap中使用列时，最重要的是在bootstrap 4中使用列时，不使用具有".row“类的元素包装列。此元素应始终与具有正填充的父级一起使用，例如：".container，.container-fluid，and all '.col- *'，因为它的填充为负值。

请看我放在jsbin.com上的这个例子或运行代码片段与整个页面。

我希望我能帮上忙。

​

​

​

p{
  background: #333;
  color: #dddddd;
  padding: 1em;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="row">
          <div class="col-sm-4">
            <p>item-1</p>
          </div>
          <div class="col-sm-4">
            <p>item-2</p>
          </div>
          <div class="col-sm-4">
            <p>item-3</p>
          </div>
        </div>
      </div>
      
      <div class="col-sm-6 col-md-4">
        <div class="row">
          <div class="col-sm-4">
            <p>item-1</p>
          </div>
          <div class="col-sm-4">
            <p>item-2</p>
          </div>
          <div class="col-sm-4">
            <p>item-3</p>
          </div>
        </div>
      </div>
      
      <div class="col-sm-6 col-md-4">
        <div class="row">
          <div class="col-sm-4">
            <p>item-1</p>
          </div>
          <div class="col-sm-4">
            <p>item-2</p>
          </div>
          <div class="col-sm-4">
            <p>item-3</p>
          </div>
        </div>
      </div>
    </div>
  </div>

​