電網與他們之間的小間距按鈕

Question

我想創建按鈕的格子就像這樣：

看這個問題How to set up a grid of buttons in bootstrap?後，我加入這個在css文件：

#channels button { 
    float: left; 
    width: auto; 
} 

而且這些按鈕在html文件：

<div id="channels" className="span12"> 
    <div className="btn-group"> 
     <button type="button" className="btn btn-default" id="channel"> 
     A 
     </button> 

     <button type="button" className="btn btn-default" id="channel"> 
     B 
     </button> 
    </div> 
    </div> 

但是，我沒有得到任何間距：

所以，我怎麼能建立這樣一個電網？

Answer 1

給予每個按鈕的餘量，這將把它隔開。 twitter引導的按鈕默認邊距爲0，這就是爲什麼當前沒有間距。

P.S.你不應該有兩個具有相同ID的元素。

.channel{ 
 
    margin:10px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<div id="channels" className="span12"> 
 
    <div className="btn-group"> 
 
     <button type="button" className="btn btn-default" class="channel"> 
 
     A 
 
     </button> 
 

 
     <button type="button" className="btn btn-default" class="channel"> 
 
     B 
 
     </button> 
 
    </div> 
 
    </div>

Answer 2

這是因爲您沒有使用行和引導的列數。

使用行和列，你可以確定你想要多少列，並給他們，直到12行。像：

<div class="row"> 
     <div class="col-lg-6"> 
       <button type="button" className="btn btn-default" id="channel"> 
       A 
       </button> 
     </div> 

     <div class="col-lg-6"> 
      <button type="button" className="btn btn-default" id="channel"> 
      B 
      </button> 
     </div> 
    </div> 

而這會給你兩個按鈕分開，因爲你有一個按鈕6個cols和其他按鈕6個cols。如果你想要的東西，如圖像，你必須：

<div> 
    <div class="row"> 
     <div class="col-lg-4"> 
       <button type="button" className="btn btn-default" id="channel"> 
       SAFE 
       </button> 
     </div> 
     <div class="col-lg-4"> 
       <button type="button" className="btn btn-default" id="channel"> 
       FUN 
       </button> 
     </div> 
     <div class="col-lg-4"> 
       <button type="button" className="btn btn-default" id="channel"> 
       FRIENDLY 
       </button> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-4"> 
       <button type="button" className="btn btn-default" id="channel"> 
       SNOW 
       </button> 
     </div> 
     <div class="col-lg-4"> 
       <button type="button" className="btn btn-default" id="channel"> 
       BEACH 
       </button> 
     </div> 
     <div class="col-lg-4"> 
       <button type="button" className="btn btn-default" id="channel"> 
       SURFING 
       </button> 
     </div> 
    </div> 
</div> 

正如你所看到的，我們是同行分發一行4周的cols 3列，因爲在網格系統4 * 3 = 12列。 Bootstrap包含一個響應式移動第一流體網格系統，隨着設備或視口尺寸的增加，可適當擴展至12列。它包含預定義的類以實現簡單的佈局選項，以及用於生成更多語義佈局的強大mixin。

想了解更多信息，請訪問http://getbootstrap.com/css/#grid瞭解Bootstrap的GRID。