HTML5 Bootstrap Flow Layout

Я пытаюсь отобразить ряд divs (или тегов) в последовательности, чтобы заполнить всю строку и обернуть к следующей строке и так далее. Если я уменьшу свое окно, они должны скорректироваться, и я в конечном итоге получу меньше элементов на строку и больше строк для прокрутки. Все это каким-то образом будет похоже на стол. Я сделал это в .NET, используя собственный элемент управления Flow Layout Windows. Есть идеи, как это сделать в html5 с помощью bootstrap? Я бегу на Angular 2. Будет здорово, если я смогу указать размер дивов, чтобы они были выровнены, но это не обязательно, в этом случае они будут соответствовать содержанию.

Спасибо.

1 ответ

  1. То, что вы ищете, это загрузочная сеточная система.
    http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

    Так, например, на большом экране будет три элемента в ряд.
    На меньшем экране будет два.

    <div class="col-md-12">
        <span class="col-md-4 col-xs-6">1 </span>
        <span class="col-md-4 col-xs-6"> 2</span>
        <span class="col-md-4 col-xs-6"> 3</span>
        <span class="col-md-4 col-xs-6"> 4</span>
        <span class="col-md-4 col-xs-6"> 55</span>
        <span class="col-md-4 col-xs-6"> 6</span>
    </div>
    

    Проверьте это в действии здесь http://codepen.io/anon/pen/pRzLav