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

Question

我正在使用 Bootstrap 和 Less 构建一个网站。

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

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

目前，如果我将它添加到左侧和右侧，它显然会将其添加到网格行中每个框的左侧和右侧，使得每个网格框之间的距离大于外侧的距离。

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

我尝试在左侧网格框中创建一个类，并仅在 CSS 中设置填充，但它无法正常工作，它将其中一个 col-sm-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;
}

you can also remove col-sm-3 class "if possible" and use this html

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

col-sm-12 class on main div will give padding to left and right but not between the grids.