Загрузочный контейнер, запускаемый с экрана

Я пытаюсь разделить экран на два столбца, один с шириной 9, а другой 3. В правом столбце мне нужен контейнер для хранения строк, но кажется, я хочу остаться в своем col, и он стреляет вправо.Загрузочный контейнер, запускаемый с экрана

Если я вынимаю контейнер, то все кнопки и вещи в этом столбце становятся вертикальными, как я могу помешать ему отстреливаться таким образом и сохранить структуру кнопок горизонтальной?

Вот небольшой пример:

http://www.bootply.com/JfUvsLOmpj

<div class="row"> 
    <div class="col-md-9" id="boardArea"> 
    <table id="board"></table> 
    </div> 
    <div class="col-md-3"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-3"> 
      <div class="row" id="firstRow"> 
      <div class="col-md-12"> 
       <div id="controlPanel"> 
       <div class="col-md-12 text-center"> 
        <button href="#" class="btn btn-default btn-sm" id="filled">Mark</button> 
        <button href="#" class="btn btn-default btn-sm" id="empty">Clear</button> 
        <button href="#" class="btn btn-default btn-sm" id="unknown">Unknown</button> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

PS: Есть несколько строк на том же уровне, firstRow.

источник

2016-10-19 shinzou

Проблема в том, что вы вложили container в первый col-md-3 div. Контейнеры имеют заданную ширину и должны использоваться только для обертывания ваших строк. Таким образом, иерархия должна идти container > row > col > row > col > row > col ...

источник

2016-10-19 23:21:53 jpopesculian

Если я вынимаю контейнер все элементы этого столбца становятся вертикальными, так что может быть сделано, чтобы предотвратить это? – shinzou

@kuhaku сделать родителя шире? (т. е. больше, чем '.col-md-3') – ochi

ОК, неважно, у меня было слишком много строк и столбцов, я изменил его на строку« row> col> ... », как вы сказали, и теперь все в порядке. – shinzou

Это вы, что ищете?

<div class="container-fluid"> 
<div class="row"> 
<div class="col-md-9"> 
    <table class="table"> 
    <tr><th>Header</th><th>Header</th></tr> 
    <tr><td>Data</td><td>Data</td></tr> 
    <tr><td>Data</td><td>Data</td></tr> 
    </table> 
</div> 
<div class="col-md-3"> 

    <button class="btn btn-success">Submit</button> 
    <button class="btn btn-success">Submit</button> 
    <button class="btn btn-success">Submit</button> 
</div> 
</div> 
</div>

Проверить эту ручку: http://codepen.io/Hudson_Taylor11/pen/qaQVzd?editors=1100

источник

2016-10-19 23:29:26

Загрузочный контейнер, запускаемый с экрана

ответ

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