Подтвердить что ты не робот

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

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

The html that does not look properThe view that does not look proper Как вы можете видеть в HTML, сетка переходит от 4 изображений на xl экранах к 3 на экранах lg до 2 на чем-то меньшем.

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

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

Любые предложения?

- ОБНОВЛЕНИЕ - Просто понял, что col-xl- * не существует. Однако это не меняет ситуацию вообще. Пожалуйста, проигнорируйте объявление xl.

- ОБНОВЛЕНИЕ 2 - Обновленные изображения.

- ОБНОВЛЕНИЕ 3 - Я попытаюсь прояснить свою цель. Для этого конкретного изображения, прикрепленного к моему сообщению, я хотел бы, чтобы в каждой строке появлялось три окна, а не все слайдеры.

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

4b9b3361

ОТВЕТЫ

Ответ 1

Я решил эту проблему, добавив 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: Начиная с Bootstrap v3.2.0 .visible-* классы устарели.

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

Классы .visible-xs,.visible-sm,.visible-md и .visible-lg также существуют, но устарели с v3.2.0. Они приблизительно эквивалентны .visible - * - block, за исключением дополнительных специальных случаев для переключающих элементов.

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

Ответ 2

Расширьте свой bootstrap.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-size и что все cols имеют одинаковый размер.

Ответ 3

Исправление .scss с использованием переменных начальной загрузки, взятых из @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);
  }
}

Ответ 4

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

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, чтобы увидеть его в действии. Надеюсь, это поможет.

Ответ 5

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

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

См. примеры

Ответ 6

Добавление в @Jonas и @KFunk ответ:

Потенциальное исправление, требующее использования всех col-size (col-xs-6 col-sm-4 col-md-4 col-lg-4).

Созданные классы: auto-clear-xs, auto-clear-sm, auto-clear-md и auto-clear-lg.

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

Примечание. Это все равно, что столбцы имеют одинаковый размер.

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;
  }
}

Ответ 7

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

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

Подробнее о сетчатой ​​системе вы можете узнать здесь

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

Ответ 8

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

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

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

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

Ответ 9

Я искал решение, а так как мой 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>

Ответ 10

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

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

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

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