2013-05-11 2 views
0

У меня есть некоторые трудности, чтобы понять, как установить интервал внутри диапазона с помощью бутстрапа.Пространство бутстрапа внутри пролета

Я хочу иметь один блок по центру, с внутренней стороны:

-он ряд с внутренней стороны:
-Один блок слева (span6) -Один блок на правой (span6)

-Один строка с внутренней стороны: кнопки -Одиной по центру (диапазон 6 offset3)

Вы можете увидеть проблему здесь: http://jsfiddle.net/UBTv4/18/

<div class='row'> 
<div class='span6 offset3'> 
    <div class='well'> 
     <h2>Title</h2>  
      <div class='row'> 
       <div class='span6'> 
        <p class="lead">Bloc left : </p> 
       </div>    
       <div class='span6'> 
        <p class="lead">Bloc right : </p> 
       </div> 
      </div> 
      <div class='row'> 
       <div class='span6 offset3'> 
        <input id="play" type="submit" value="play" class="btn btn-primary"/>  
       </div> 
      </div> 
    </div> 
</div> 

В чем проблема?

Я хочу что-то вроде этого:

enter image description here

ответ

0

Я думаю, что вы хотите использовать .row-fluid вместо этого. Это приведет к тому, что ваш 2 .span6 будет одной строкой.

Вот дополненная скрипку: http://jsfiddle.net/skelly/UBTv4/22/

0

Вы также можете использовать втягивание право и тянуть налево, чтобы сделать соответствующие блоки перемещения влево и вправо.

</div>    
       <div class='span6'> 
        <p class="lead pull-right">Bloc right : </p> 
       </div> 
      </div> 
      <div class='row'> 
       <div class='span6 offset3'> 
        <input id="play" type="submit" value="play" class="btn btn-primary"/>  
       </div> 
      </div> 
    </div> 
</div> 

Вы можете увидеть код здесь: http://jsfiddle.net/UBTv4/18/

2

Вот ваше решение.

<div class='row'> 
    <div class='span6 offset3 well' > <!-- .well class here instead of inner div --> 
      <h2>Title</h2>  
       <div class='row'> 
        <div class='span3'> <!-- instead of span6 --> 
         <p class="lead">Bloc left : </p> 
        </div>    
        <div class='span3'> <!-- instead of span6 --> 
         <p class="lead">Bloc right : </p> 
        </div> 
       </div> 
       <div class='row'> 
        <div class='span3 offset3'> <!-- instead of span6 --> 
         <input id="play" type="submit" value="play" class="btn btn-primary"/>  
        </div> 
       </div> 
     </div> 
</div> 

http://jsfiddle.net/UBTv4/23/

Как объяснения я предлагаю вам внимательно прочитать раздел Верстка колонки по этой ссылке:

http://getbootstrap.com/2.3.2/scaffolding.html

В кратком описании, если гнездо строка в span6, сумма внутренних интервалов строк также должна быть 6 (3 + 3).

Также класс .well имеет некоторые paddings/marings, так что вы не можете использовать его «между» родительскими и вложенными строками/пролетами.

+0

Спасибо, но если я ставлю juste строку с кнопкой воспроизведения, она не работает, кнопка не идеально по центру:/ См. Здесь: http://jsfiddle.net/UBTv4/24/ – user2178964

+0

Это потому что вы помещаете кнопку в 4-й столбец 6. Попробуйте нарисовать сетку на бумаге, и вы увидите, что в половине строки есть разделитель между пролетами, так что вы не можете туда войти. Попробуйте следующее: http://jsfiddle.net/UBTv4/26/ –

Смежные вопросы