引導程序2.3流體行間距

我正在嘗試創建一行div（每週一個），每個div包含一組用於該時間段用戶可用性的按鈕。但是，無論我嘗試什麼，我都無法使Bootstrap網格均勻地分配空間。由於有7天的時間，我無法均勻分配12個空間的跨度，所以每個div都是span1。但是，在Bootstrap文檔中，它們顯示了均勻填充可用空間的情況。在我的例子中，它總是將div分散到左側，所以一切都變得狹窄，而不是佔用可用空間。引導程序2.3流體行間距

我這裏有一個小提琴：http://jsfiddle.net/usrwvreL/

有人能指出使用網格/流體排空間這些項目適當的正確方法？

來源

2015-02-11 user101289

最終，「正確」的解決方案是將網格定製爲7列或14列。如果您可以切換到引導程序3，可以在引導程序站點上使用它們的[自定義頁面]（http://getbootstrap.com/customize/#grid-system）完成。 – Ted 2015-02-21 15:08:27

@ Ted--不幸的是我現在被Bootstrap 2.3.2卡住了，否則這將是一個更簡單的問題。 – user101289 2015-02-23 17:03:55

說實話，我能想到做這個而不升級Bootstrap的唯一方法是將每列設置爲14.2857142857143％寬度，這將完全繞過Bootstrap的網格... – jsa 2015-02-23 19:38:38

引導使用12盒網格系統，所以如果你需要七個分，你可以添加自定義網格劃分，

這樣你就可以做出這樣.col-seventh{width: calc (100%/7)}

選擇擴展，你可以做一個新的網格類型：

.col-seventh-1{width: 14.285714%;} 
.col-seventh-2{width: 28.571428%;} 
.col-seventh-3{width: 42.857142%;} 
.col-seventh-4{width: 57.142857%;} 
.col-seventh-5{width: 71.428571%;} 
.col-seventh-6{width: 85.714285%;} 
.col-seventh-7{width: 100%;}

相反，你也可以使用flexboxes CSS3屬性佈局（非自舉）做這一切爲你！

來源

2015-02-11 23:18:51 maioman

我發現面對這種挑戰時擊敗網格系統的簡單方法是利用嵌套行。創建三個大小爲4的列，，其中您可以創建三列四列。

在第一個父列中，您可以有兩個子列。第一個子列將使用.col-size-offset-4進行偏移，然後再以.col-size-4進行。

中心父列將有大小四個三個子欄目，並最終父列將有大小兩個子柱4

<!--This is the parent row--> 
<div class="row"> 

    <!--This is a parent column--> 
    <div class="col-md-4"> 

     <!--Here is the gold. Create nested rows--> 
     <div class="row"> 

      <!--Here we are offseting this column to produce a centered effect--> 
      <div class="col-md-offset-4"> 

      </div> 

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

      </div> 

     </div> 

    </div> 

    <!--The middle parent column--> 
    <div class="col-md-4"> 

     <div class="row"> 

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

      </div> 

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

      </div> 

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

      </div> 

     </div> 

    </div> 

    <!--The last parent column, farthest to the right 
    <div class="col-md-4"> 

     <div class="row"> 

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

      </div> 

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

      </div> 

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

      </div> 

     </div> 

    </div> 

</div>

來源

2015-02-11 23:21:14

我只是想知道這可能是把一個很好的解決方案個別行上的日期。所以你只需要將一個btn組與6個btns對齊。

來源

2015-02-18 03:27:25

你介意進一步解釋還是提供一個例子？謝謝 – user101289 2015-02-18 16:06:22

你爲什麼不嘗試改變佈局。比方說，你可以顯示每行三個時間按鈕。日期將位於最上面一行，但它可以對齊中心，其他按鈕也可以位於中心。

來源

2015-02-22 20:58:18

爲什麼你不能這樣？

<div class="container-fluid"> 
    <div class="span1 avail-buttons"><span class="avail-date text-center">2015-02-11</span> 
    <div class="button-row row-fluid">  
      <button data-slot="0" type="button" class="avail-button btn btn-danger">08:45 AM</button> 
      <button data-slot="1" type="button" class="avail-button btn btn-danger">09:15 AM</button> 
      <button data-slot="2" type="button" class="avail-button btn btn-danger">09:45 AM</button> 
      <button data-slot="3" type="button" class="avail-button btn btn-danger">10:15 AM</button> 
      <button data-slot="4" type="button" class="avail-button btn btn-danger">10:45 AM</button> 
      <button data-slot="5" type="button" class="avail-button btn btn-danger">11:15 AM</button> 
     </div> </div></div>

來源

2015-02-23 12:32:34

引導程序2.3流體行間距

回答

相關問題