如何在Bootstrap中添加填充到網格的左側和右側，而不使用使用col-sm-3的網格框之間的填充

Question

我正在使用Bootstrap和Less構建網站。

我有一個引導程序網格，雖然我知道如何使用CSS向左和向右添加填充，但我只希望填充位於第一個網格框的左側和最後一個網格框的右側在行中。目前有4個流體排。我希望它們保持連續，但在頁面邊緣和網格行的開始/結束之間大約有100px。

我確實希望在每個網格框的信息/文本之間填充，但是我希望在最左邊和最右邊有更大的數量。

目前，如果我將它添加到左側和右側，它顯然會將其添加到網格行中每個框的左側和右側，使每個網格框之間的距離大於外側的距離。

我希望行與頁面邊緣之間有很大的差距，但是每個網格框之間有一個小小的差距。

我已經試過在左邊的網格框上做一個類，並在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

如果需要USSE 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%; 
} 

col-sm-12類上主要的div會給填充到左，右但不在網格之間。

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>