Bootstrap 3, разная высота колонок макета?

Question

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

Можно ли создать что-то подобное с начальной загрузкой? Я прочитал документацию об обертывании столбцов, это путь? Что было бы лучшим подходом к его достижению?

Answer 1

Что люди часто забывают при использовании бутстрапа, так это то, что он полностью настраивается. Вы можете использовать свой собственный css для определения размера и позиции div, если ваш код css идет после загрузки.

Вот что-то похожее на то, что вы пытаетесь достичь: fiddle

<div id="wrapper" class=""> 

    <!-- Sidebar --> 
    <div id="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
      <li class="sidebar-brand"> 
       <a href="#"> 
        Start Bootstrap 
       </a> 
      </li> 
      <li> 
       <a href="#">Dashboard</a> 
      </li> 
      <li> 
       <a href="#">Shortcuts</a> 
      </li> 
      <li> 
       <a href="#">Overview</a> 
      </li> 
      <li> 
       <a href="#">Events</a> 
      </li> 
      <li> 
       <a href="#">About</a> 
      </li> 
      <li> 
       <a href="#">Services</a> 
      </li> 
      <li> 
       <a href="#">Contact</a> 
      </li> 
     </ul> 
    </div> 
    <!-- /#sidebar-wrapper --> 

    <!-- Page Content --> 
    <div id="page-content-wrapper"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h1>Simple Sidebar</h1> 
        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> 
        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- /#page-content-wrapper --> 

</div> 

Answer 2

Я не думаю, что вы можете сделать это только с начальной загрузки. Возможно, вы должны использовать https://github.com/desandro/masonry, который решает эту проблему.

Bootstrap использует float для размещения ваших столбцов, в то время как масонство вычисляет абсолютное положение, чтобы поместить div в нужное место.

Вы все еще можешь использовать Bootstrap для определения отзывчивого поведения вашей колонки (ширина уместности)