自定義網格系統

Question

我創造了這個網格，你看到下面：

，而無需使用引導或其他網格系統。 現在我想用引導，但我不知道是否有可能建立類似的東西，因爲它沒有保存箱之間的間隔相等，

例如：http://jsfiddle.net/xe6h7grs/

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 

      <div class="box">A</div> 
     </div> 

     <div class="col-md-4"> 

      <div class="box">B</div> 
     </div> 

     <div class="col-md-4"> 

      <div class="box"> 
       C 
       <ul> 
        <li>example</li> 
        <li>example</li> 
        <li>example</li> 
        <li>example</li> 
        <li>example</li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-4"> 

      <div class="box">HEY</div> 
     </div> 

     <div class="col-md-4"> 

      <div class="box">HEY</div> 
     </div> 

     <div class="col-md-4"> 

      <div class="box">HEY</div> 
     </div> 
    </div> 

</div> 

Answer 1

引導列有左/右填充，這可能會導致不必要的間距。您可以根據需要覆蓋此填充。

.col-xs-4 { 
    padding: 0; 
} 

http://jsfiddle.net/xe6h7grs/1/

或者你可以設置框類保證金爲負值覆蓋填充。

.box { 
    margin: 1px -15px; 
} 

另請注意，對於響應性，默認列寬度爲100％，並且指定的大小可以放大。這意味着如果你只聲明md，xs和sm將是100％。

Answer 2

1）一般來說，你不應該任意改變網格本身。相反，你可以使用自定義類：

.no-gutter >[class*='col-'] { 
    padding-right: 0; 
    padding-left: 0; 
} 

這將允許您調整（有關列和任何其他規則）列填充到任何你所需要的。

2）或者如果您使用SASS，您可以使用下面的Variable來調整填充。

// **在列之間填充。分爲左右兩半。

$grid-gutter-width:   30px !default; 

3）如果有意義，也可以使用自定義構建。見Customize Grid System。

查看代碼段中的示例。

body, 
 
html { 
 
    padding-top: 20px; 
 
} 
 
.lightblue { 
 
    background: lightblue; 
 
} 
 
.red { 
 
    background: #f00; 
 
} 
 
.box { 
 
    background: #ddd; 
 
    padding: 20px; 
 
} 
 
.box2 { 
 
    background: #f00; 
 
    color: white; 
 
    padding: 20px; 
 
    margin: 1px; 
 
} 
 
.box3 { 
 
    background: #444; 
 
    padding: 20px; 
 
    margin: 1px; 
 
    color: white; 
 
} 
 
.no-gutter >[class*='col-'] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <h3>Original Grid</h3> 
 

 
    <div class="row lightblue"> 
 
    <div class="col-md-4"> 
 
     <div class="box">A</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="box">B</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="box">C 
 
     <ul> 
 
      <li>example</li> 
 
      <li>example</li> 
 
      <li>example</li> 
 
      <li>example</li> 
 
      <li>example</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row lightblue"> 
 
    <div class="col-md-4"> 
 
     <div class="box">HEY</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="box">HEY</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="box">HEY</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <h3>Your example Grid</h3> 
 

 
    <div class="row lightblue"> 
 
    <div class="col-md-4"> 
 
     <div class="box2">A</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="box2">B</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="box2">C 
 
     <ul> 
 
      <li>example</li> 
 
      <li>example</li> 
 
      <li>example</li> 
 
      <li>example</li> 
 
      <li>example</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row lightblue"> 
 
    <div class="col-md-4"> 
 
     <div class="box2">HEY</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="box2">HEY</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="box2">HEY</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <h3>Columns with Zero Padding | Outcome</h3> 
 

 
    <div class="row no-gutter red"> 
 
    <div class="col-md-4"> 
 
     <div class="box3">A</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="box3">B</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="box3">C 
 
     <ul> 
 
      <li>example</li> 
 
      <li>example</li> 
 
      <li>example</li> 
 
      <li>example</li> 
 
      <li>example</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row no-gutter red"> 
 
    <div class="col-md-4"> 
 
     <div class="box3">HEY</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="box3">HEY</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="box3">HEY</div> 
 
    </div> 
 
    </div> 
 
</div>