Остановка Bootstrap .col обертки внизу

У меня проблема с моими загрузочными элементами, это моя текущая настройка на больших экранах:

------------------------------------
|                        |     2    |
             1           ------------
|                        |     3    |
------------------------ |          |
                         ------------

И мой упрощенный код выглядит примерно так:

<div class="row">
    <div class="col-md-8 col-ms-12 col-sm-12"></div>
    <div class="col-md-4 col-ms-6 col-sm-6"></div>
    <div class="col-md-4 col-ms-6 col-sm-6"></div>
</div>

Теперь, к сожалению, иногда Div 2 становится больше и толкает Div 3 ниже, чем нижняя часть Div 1, и он заворачивается под него. Как я могу остановить это и оставить Div 3 с правой стороны, даже если он ниже, чем Div 1? Я пробовал clearfix, но он не работает!

P.S. Я использую эту средне-маленькую точку останова "ms" в качестве дополнительной точки останова, которую я установил.


vertical-alignment twitter-bootstrap col twitter-bootstrap-3
person UnluckyForSome    schedule 10.08.2016    source источник
comment
Возможно ли, что ваша пользовательская точка останова col-ms-* вызывает проблему?   -  person Robert    schedule 10.08.2016
comment
Я только что удалил их для проверки, и у меня все еще возникает проблема, предназначена ли начальная загрузка для предотвращения нормального переноса столбца?   -  person UnluckyForSome    schedule 10.08.2016
comment
bootply.com/b2m0PUjBHz — это ожидаемый результат, который я получаю. Что он делает, что вы считаете неправильным?   -  person Robert    schedule 10.08.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете применить свойство float: right; к третьему блоку, когда ширина экрана станет 992px или больше. Для этой цели я определил новый специальный класс .pull-md-right.

Пожалуйста, проверьте результат:

результат

/* The heart of the matter */
@media (min-width: 992px) {
  .pull-md-right {
    float: right !important;
  }
}

/* Decorations */
.row > div:nth-of-type(1) { background: #9c6; min-height: 200px; }
.row > div:nth-of-type(2) { background: #ff0; min-height: 250px; }
.row > div:nth-of-type(3) { background: #f93; min-height: 150px; }
.row > div {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  padding-top: 6px; 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-8 col-sm-12">1</div>
    <div class="col-md-4 col-sm-6">2</div>
    <div class="col-md-4 col-sm-6 pull-md-right">3</div>
  </div>
</div>

person Gleb Kemarsky    schedule 10.08.2016