Question

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

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

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

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

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

我尝试在左侧网格框中创建一个类，并在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;
}

您也可以删除col-sm-3类“如果可能”并使用此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%;
}

主div上的
col-sm-12类将左右填充，但不在网格之间。

Answer 2

在引导程序中使用列并且最重要的是使用引导程序4时的一个好习惯是不使用具有“.row”类的元素包装列。此元素应始终与具有正填充的父级一起使用，例如：“。container，.container-fluid和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>

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

2 个答案: