Почему последняя панель на новой строке

Question

У меня возникла проблема с bootstrap 3.0 с использованием панелей и колонок. Когда страница будет отображаться в полноэкранном режиме, я бы хотел, чтобы последняя панель была чуть ниже первой, вместо того чтобы иметь ее в новой строке, чтобы уменьшить прокрутку для пользователей, которые ее используют. Как я могу это достичь?

http://jsfiddle.net/39q8yxrv/

<div class="col-sm-4 col-md-4"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <strong>Personal details</strong> 
     </div> 
    </div> 
    <div class="panel-body"> 
     <div class="form-group"> 
      <label for="" class="col-sm-4 col-md-4 control-label"> 
       <strong>Field</strong> 
      </label> 
      <div class="col-sm-8 col-md-8"> 
       <div class="well well-sm"> 
        Male 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="col-sm-4 col-md-4"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <strong>Personal details</strong> 
     </div> 
    </div> 
    <div class="panel-body"> 
     <div class="form-group"> 
      <label for="" class="col-sm-4 col-md-4 control-label"> 
       <strong>Field</strong> 
      </label> 

      <div class="col-sm-8 col-md-8"> 
       <div class="well well-sm"> 
        Male 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="col-sm-4 col-md-4"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <strong>Personal details</strong> 
     </div> 
    </div> 
    <div class="panel-body"> 
     <div class="form-group"> 
      <label for="" class="col-sm-4 col-md-4 control-label"> 
       <strong>Field</strong> 
      </label> 
      <div class="col-sm-8 col-md-8"> 
       <div class="well well-sm"> 
        Male 
       </div> 
      </div> 
      <label for="" class="col-sm-4 col-md-4 control-label"> 
       <strong>Field</strong> 
      </label> 
      <div class="col-sm-8 col-md-8"> 
       <div class="well well-sm"> 
        Male 
       </div> 
      </div> 
      <label for="" class="col-sm-4 col-md-4 control-label"> 
       <strong>Field</strong> 
      </label> 
      <div class="col-sm-8 col-md-8"> 
       <div class="well well-sm"> 
        Male 
       </div> 
      </div> 
      <label for="" class="col-sm-4 col-md-4 control-label"> 
       <strong>Field</strong> 
      </label> 
      <div class="col-sm-8 col-md-8"> 
       <div class="well well-sm"> 
        Male 
       </div> 
      </div> 
      <label for="" class="col-sm-4 col-md-4 control-label"> 
       <strong>Field</strong> 
      </label> 
      <div class="col-sm-8 col-md-8"> 
       <div class="well well-sm"> 
        Male 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="col-sm-4 col-md-4"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <strong>Personal details</strong> 
     </div> 
    </div> 
    <div class="panel-body"> 
     <div class="form-group"> 
      <label for="" class="col-sm-4 col-md-4 control-label"> 
       <strong>Field</strong> 
      </label> 
      <div class="col-sm-8 col-md-8"> 
       <div class="well well-sm"> 
        Male 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

сетки Bootstrap составляет 12 столбцов, то есть 16. изменение col-sm-4, col-md-4 к col-sm-3 и col-md-3, чтобы поместиться в 12 столбцов.

Answer 2

Вы имеете в виду это? http://jsfiddle.net/39q8yxrv/1/

Вам просто нужно уложить две панели в одну колонку. В вашем текущем макете есть 4 столбца (col-md-4), каждая из которых имеет ширину 33%, что превышает 100% общей ширины. Итак, ваш последний столбец подталкивается ниже остальных. Тем не менее, ваш первый столбец будет содержать обе панели, если настроить как:

<div class="col-sm-4"> 
    <div class="panel">panel 1...</div> 
    <div class="panel">panel 2...</div> 
</div> 

Вы также хотите, чтобы еще раз взглянуть на документы Bootstrap на панелях: http://getbootstrap.com/components/#panels. Ваш заголовок панели и тело должны находиться внутри основного панели. Поскольку у вас есть это сейчас, ваше панельное тело находится вне контейнера панели. Если вы используете заголовок панели для стиля серого фона, вам может потребоваться просто использовать класс .well (http://getbootstrap.com/components/#wells).

Еще одно наблюдение -

<div class="col-sm-4 col-md-4"></div> 

Это является излишним. Вам нужно всего лишь использовать col-sm-4, который будет применяться к маленьким экранам и выше. Если вам необходимо изменить расположение на больших экранах, только тогда вам нужно определить другой класс, так, например:

<div class="col-sm-4 col-lg-6"></div> 

охватывают ли 12 столбцов на экстра-маленький экран, 4 колонки на малых и средних экранов, и 6 столбцов на большом и выше.