bootstrap 2.3 Интервал между рядами жидкости

Question

Я пытаюсь создать ряд div (по одному в день недели), каждый из которых содержит набор кнопок для доступности пользователя для этого временного интервала. Однако, независимо от того, что я пытаюсь, я не могу получить сетку Bootstrap для равномерного распределения. Поскольку есть семь дней, я не могу равномерно разделить 12-пространственный промежуток, поэтому каждый div равен span1. Однако в документах Bootstrap они показывают это равномерное заполнение доступного пространства. В моем примере он всегда группирует divs влево, так что все становится тесно, а не занимает доступное пространство.

У меня есть скрипка здесь: http://jsfiddle.net/usrwvreL/

Может кто-то указать правильный путь, чтобы использовать сетку/строку жидкости в пространство этих элементов надлежащим образом?

Answer 1

Bootstrap использует подвесную систему с 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 свойство макета (без начальной загрузки), чтобы сделать все это для вас !!

Answer 2

Я считаю, что простой способ победить сетку при столкновении с этим вызовом - использовать вложенные строки. Создайте три столбца размером 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> 

Answer 3

Я просто интересно, что это может быть хорошим решением, чтобы положить дата на отдельной строке. Так что вам просто нужно выровнять группу btn с 6 бит.

Answer 4

Почему бы вам не попробовать изменить макет. Например, вы можете показывать три временных кнопки в строке. Дата будет на самом верхнем ряду, но она может быть выровнена по центру, а остальные кнопки со временем также могут находиться в центре.

Answer 5

Почему вы не можете так выразиться?

<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>