Очистить строки при выполнении мульти-отзывчивых столбцов-Bootstrap

что название может быть не очень точным, но вот ситуация:

Как вы можете видеть в HTML, система сетки идет от 4 изображения на xl экранах до 3 на экранах lg до 2 на что-нибудь меньше.

Я пытаюсь заставить его правильно отображать-правильное количество изображений при каждом размере экрана, то есть. Тем не менее, что-то фанки происходит и не может понять это с помощью классов bootstraps.

Мне кажется, что я бы динамическое добавление строк в каждой точке останова.

какие предложения?

-- UPDATE -- Просто понял, что col-xl-* не существует. Однако это совершенно не меняет ситуацию. Пожалуйста, не обращайте внимания на декларацию xl.

обновление-- 2 -- Обновленные изображения.

обновление-- 3 -- Я постараюсь прояснить свою цель. Для этого конкретного изображения, прикрепленного в моем посте, я хотел бы, чтобы в строке появилось 3 поля - не все кавардак.

когда он рушится до 2 коробок в строке (устройство xs), я хочу убедиться, что каждая строка имеет 2 коробки.

11 54
twitter-bootstrap twitter-bootstrap-3 grid-system

11 ответов:

я решил эту проблему путем добавления clearfix элементов, где они должны быть. Я хотел 3 колонки на md и 2 колонки на sm и вот как я это сделал:

<div class="row">
    <div class="col-sm-6 col-md-4"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-md"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-md"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
</div>

так что я использовал clearfix visible-sm после каждого второго div и clearfix visible-md после каждого третьего div. Я не считаю это решение идеальным, но оно работает довольно хорошо.

EDIT: В качестве начальной загрузки В3.2.0 классы.

http://getbootstrap.com/css/#responsive-utilities:

классы .видно-хз .видны-см .видно-МД, И.видно-LG также существуют, но не поддерживаются в версии 3.2.0. Они примерно эквивалентны .видимый - * - блок, за исключением дополнительных специальных случаев для переключения связанных элементов.

EDIT 2: это решение работает до тех пор, пока вы не хотите редактировать CSS, если у вас есть возможность сделать это, я рекомендую вам использовать Джонас как это гораздо проще на мой взгляд.

38

продлить свой загрузчик.css с этим css:

@media (min-width:1200px){
    .auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
    .auto-clear .col-md-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-md-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-md-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
    .auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
    .auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-xs-6:nth-child(odd){clear:left;}
}

использовать его как:

<div class="row auto-clear">
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
        <p>Hey</p>
    </div>
</div>

Примечание: это требует использования всех col-размеров и что все cols имеют одинаковый размер.

60

An .SCSS исправить с помощью переменных bootstrap, взятых из @jonas и @yog

@mixin row-first-child($col-type) {
  .col-#{$col-type}- {
    &1:nth-child(12n+1),
    &2:nth-child(6n+1),
    &3:nth-child(4n+1),
    &4:nth-child(3n+1),
    &6:nth-child(odd){
      clear: left;
    }
  }
} 

.auto-clear {
  @media (min-width: $screen-lg-min){
    @include row-first-child(lg);
  }
  @media (min-width: $screen-md-min) and (max-width: $screen-md-max){
    @include row-first-child(md);
  }
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max){
    @include row-first-child(sm);
  }
  @media (max-width: $screen-xs-max){
    @include row-first-child(xs);
  }
}
11

причина, по которой ваш макет ломается, связана с динамической высотой представленных изображений. Исправление просто, хотя, просто ограничьте высоту изображений. Например

HTML

<div class="container">
  <div class="row">
    <div id="uploaded">
      <div class="col-xs-6 col-lg-4">
        <div class="file-block">
          <div class="file-thumbnail">
            <img src="http://placehold.it/200x500" alt="">
          </div>
          <div class="file-row-footer">
            <a href="javascript:void(0)"> Delete</a>
          </div>
        </div>
      </div>

      <div class="col-xs-6 col-lg-4">
        <div class="file-block">
          <div class="file-thumbnail">
            <img src="http://placehold.it/200x500" alt="">
          </div>
          <div class="file-row-footer">
            <a href="javascript:void(0)"> Delete</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.file-block {
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 20px 0px;
  text-align: center;
}

.file-thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  height: 180px;
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.file-thumbnail:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
  height: 100%;
}

.file-thumbnail img {
  display: inline-block;
  margin: 0 auto;
  max-width: 150px;
  max-height: 180px;
  vertical-align: middle;
}

Проверьте CodePen чтобы увидеть его в действии. Надеюсь, это поможет.

3

вы можете исправить это очень легко с помощью css, если вам не нужно поддерживать IE8.

.file-row-contain.col-lg-4:nth-child(3n+1),
.file-row-contain.col-xs-6:nth-child(2n+1) { 
    clear: left; 
}

посмотреть примеры

1

добавление к ответу @Jonas и @KFunk:

потенциальная починка для требовать пользы всех col-размеров (col-xs-6 col-sm-4 col-md-4 col-lg-4).

классы создано: автоматическая очистка-хз, автоматическая очистка-см, автоматическая очистка-МД и авто-понятно-ЛГ.

Я отвечу на мобильные.

Примечание: это по-прежнему требует, чтобы столбцы были одинаковыми размер.

HTML

<div class="row auto-clear-xs auto-clear-lg">
    <div class="col-xs-6 col-lg-3">
        <p>Hey</p>
    </div>
</div>

SCSS

@mixin row-first-child($col-type, $clear-type) {
   .col-#{$col-type}- {
    &1:nth-child(12n+1),
    &2:nth-child(6n+1),
    &3:nth-child(4n+1),
    &4:nth-child(3n+1),
    &6:nth-child(odd){
      clear: $clear-type;
    }
  }
}

.auto-clear-xs{
  @media (min-width: $screen-xs-min){
    @include row-first-child(xs, both);
}
  @media (max-width: $screen-xs-min){
    @include row-first-child(xs, both);
  }
}

.auto-clear-sm{
  @media (min-width: $screen-sm){
    @include row-first-child(xs, none);
    @include row-first-child(sm, both);
  }
}

.auto-clear-md{
  @media (min-width: $screen-md){
    @include row-first-child(xs, none);
    @include row-first-child(sm, none);
    @include row-first-child(md, both);
  }
}

.auto-clear-lg{
  @media (min-width: $screen-lg){
    @include row-first-child(xs, none);
    @include row-first-child(sm, none);
    @include row-first-child(md, none);
    @include row-first-child(lg, both);
  }
}

CSS

@media (min-width: 480px) {
  .auto-clear-xs .col-xs-1:nth-child(12n+1), 
  .auto-clear-xs .col-xs-2:nth-child(6n+1), 
  .auto-clear-xs .col-xs-3:nth-child(4n+1), 
  .auto-clear-xs .col-xs-4:nth-child(3n+1), 
  .auto-clear-xs .col-xs-6:nth-child(odd) {
    clear: both;
  }
}
@media (max-width: 480px) {
  .auto-clear-xs .col-xs-1:nth-child(12n+1), 
  .auto-clear-xs .col-xs-2:nth-child(6n+1), 
  .auto-clear-xs .col-xs-3:nth-child(4n+1), 
  .auto-clear-xs .col-xs-4:nth-child(3n+1), 
  .auto-clear-xs .col-xs-6:nth-child(odd) {
    clear: both;
  }
}


@media (min-width: 768px) {
  .auto-clear-sm .col-xs-1:nth-child(12n+1), 
  .auto-clear-sm .col-xs-2:nth-child(6n+1), 
  .auto-clear-sm .col-xs-3:nth-child(4n+1), 
  .auto-clear-sm .col-xs-4:nth-child(3n+1), 
  .auto-clear-sm .col-xs-6:nth-child(odd) {
    clear: none;
  }
  .auto-clear-sm .col-sm-1:nth-child(12n+1), 
  .auto-clear-sm .col-sm-2:nth-child(6n+1), 
  .auto-clear-sm .col-sm-3:nth-child(4n+1), 
  .auto-clear-sm .col-sm-4:nth-child(3n+1), 
  .auto-clear-sm .col-sm-6:nth-child(odd) {
    clear: both;
  }
}

@media (min-width: 992px) {
  .auto-clear-md .col-xs-1:nth-child(12n+1), 
  .auto-clear-md .col-xs-2:nth-child(6n+1), 
  .auto-clear-md .col-xs-3:nth-child(4n+1), 
  .auto-clear-md .col-xs-4:nth-child(3n+1), 
  .auto-clear-md .col-xs-6:nth-child(odd) {
    clear: none;
  }
  .auto-clear-md .col-sm-1:nth-child(12n+1), 
  .auto-clear-md .col-sm-2:nth-child(6n+1), 
  .auto-clear-md .col-sm-3:nth-child(4n+1), 
  .auto-clear-md .col-sm-4:nth-child(3n+1), 
  .auto-clear-md .col-sm-6:nth-child(odd) {
    clear: none;
  }
  .auto-clear-md .col-md-1:nth-child(12n+1), 
  .auto-clear-md .col-md-2:nth-child(6n+1), 
  .auto-clear-md .col-md-3:nth-child(4n+1), 
  .auto-clear-md .col-md-4:nth-child(3n+1), 
  .auto-clear-md .col-md-6:nth-child(odd) {
    clear: both;
  }
}

@media (min-width: 1200px) {
  .auto-clear-lg .col-xs-1:nth-child(12n+1), 
  .auto-clear-lg .col-xs-2:nth-child(6n+1), 
  .auto-clear-lg .col-xs-3:nth-child(4n+1), 
  .auto-clear-lg .col-xs-4:nth-child(3n+1), 
  .auto-clear-lg .col-xs-6:nth-child(odd) {
    clear: none;
  }
  .auto-clear-lg .col-sm-1:nth-child(12n+1), 
  .auto-clear-lg .col-sm-2:nth-child(6n+1), 
  .auto-clear-lg .col-sm-3:nth-child(4n+1), 
  .auto-clear-lg .col-sm-4:nth-child(3n+1), 
  .auto-clear-lg .col-sm-6:nth-child(odd) {
    clear: none;
  }
  .auto-clear-lg .col-md-1:nth-child(12n+1), 
  .auto-clear-lg .col-md-2:nth-child(6n+1), 
  .auto-clear-lg .col-md-3:nth-child(4n+1), 
  .auto-clear-lg .col-md-4:nth-child(3n+1), 
  .auto-clear-lg .col-md-6:nth-child(odd) {
    clear: none;
  }
  .auto-clear-lg .col-lg-1:nth-child(12n+1), 
  .auto-clear-lg .col-lg-2:nth-child(6n+1), 
  .auto-clear-lg .col-lg-3:nth-child(4n+1), 
  .auto-clear-lg .col-lg-4:nth-child(3n+1), 
  .auto-clear-lg .col-lg-6:nth-child(odd) {
    clear: both;
  }
}
1

Это на самом деле так и должно быть. Сетка Bootstrap состоит из 12 столбцов, вы говорите ему, чтобы размер одного элемента lg был 4/12, что является третьим, а элемент xs-6/12, что составляет половину доступной ширины.

Если вы проверите примененный стиль, вы увидите, что col-xs-6 совпадает с установкой ширины одного элемента на 50% и 33.33% для col-lg-4.

вы можете прочитать больше о системе сетки здесь

EDIT: я думаю, что понимаю теперь вашу проблему, не видя кода я не могу дать вам точное решение. Однако проблема, похоже, заключается в переменной высоте ваших ящиков, Если у вас есть все они на одной высоте, это должно дать вам правильное количество ящиков в строке.

0

похоже, что единственным решением вашей проблемы является установка минимальной высоты или фиксированной высоты для ваших элементов, чтобы не было несоответствий, которые вызывают ваши проблемы.

добавить это:

.file-row-contain {
  min-height:250px;
}

...установите высоту в соответствии с вашими потребностями

0

Я тоже искал решение, и поскольку мой HTML отображается через CMS, я не мог использовать решение принятого ответа.

Так что мое решение:

.teaser {
  // break into new line after last element
  > div:last-child {
    clear: right;
  }
}

.teaser {
  // two colums
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    > div:nth-child(2n+1) {
      clear: left;
    }
  }
}

.teaser {
  // three colums
  @media (min-width: @screen-md-min) {
    > div:nth-child(3n+1) {
      clear: left;
    }
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row teaser">
    <div class="col-sm-6 col-md-4">div1</div>
    <div class="col-sm-6 col-md-4">div2<br>more content</div>
    <div class="col-sm-6 col-md-4">div3</div>
    <div class="col-sm-6 col-md-4">div4</div>
    <div class="col-sm-6 col-md-4">div5<br>more content content<br>content</div>
    <div class="col-sm-6 col-md-4">div6</div>
    <div class="col-sm-6 col-md-4">div7<br>more content</div>
    <div class="col-sm-6 col-md-4">div8</div>
</div>

надеюсь, это поможет кому-то: -)

0

Bootstrap 4 вводит hidden-*-up и hidden-*-down классы. Очень удобная (и элегантная) утилита для таких ситуаций.

доступные классы

  • The .hidden-*-up классы скрывают элемент, когда видовой экран находится в заданной точке останова или шире. Например, .hidden-md-up скрывает элемент на средних, больших и очень больших экранах.
  • The .hidden-*-down классы скрывают элемент, когда видовой экран находится на заданная точка останова или меньше. Например, .hidden-md-down скрывает элемент на сверхмалых, малых и средних видовых экранах.
  • нет явных"видимых"/" показывающих " адаптивных классов утилит; вы делаете элемент видимым, просто не скрывая его в этой точке останова размер.
  • вы можете объединить один .hidden-*-up класса с одним .hidden-*-down класс для отображения элемента только на заданном интервале размеров экрана. Для например, .hidden-sm-down.hidden-xl-up показывает элемент только на средний и большой область просмотра. Использование нескольких .hidden-*-up классы или несколько .hidden-*-down классы избыточны и бессмысленны.
  • эти классы не пытаются приспособить менее распространенные случаи, когда видимость элемента не может быть выражена как один непрерывный диапазон размеров точек останова видового экрана; вместо этого вам нужно будет использовать пользовательский CSS в таких случаях.

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

0

в случае, если количество col- полей в строке динамический и разные разрешения, как это в моем случае, чем на основе ваших col- классы выполняют оператор модуля. Возьмите пример ниже примера.

<div class="row">
    <?php $elementCounter = 0; ?>
    <?php foreach ( $this->programs as $program ): ?>
        <div class="col-xs-6 col-sm-3"> DATA </div>
        <?php $elementCounter++; ?>
        <?php if( $elementCounter % 4 == 0 ): ?>
            <div class="clearfix hidden-xs"></div>
        <?php elseif( $elementCounter % 2 == 0 ): ?>
            <div class="clearfix visible-xs"></div>
        <?php endif; ?>
    <?php endforeach; ?>
</div>

col-xs-6 означает, что он имеет 2 коробки в ряд для сверхмалых устройств. так что для этого я добавил, что $elementCounter % 2 == 0 условие, так что это верно для каждого второго элемента ( после ). и добавил clearfix С visible-xs поэтому он не должен влиять на рабочий стол или другие резолюции.

col-sm-3 означает 4 коробки в строке для небольших и выше устройств, так что в этом случае я добавил $elementCounter % 4 == 0 и hidden-xs так что clearfix скрыт для устройств xs и будет виден для небольших и выше. Таким образом, вы можете изменить его соответствующим образом.

0