it-swarm.com.ru

Bootstrap 3 - верхнее поле столбца на маленьких экранах

У меня есть строка с X возможных столбцов.

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <div class="col-lg-3 col-sm-4 col-xs-6">content</div>
        <!-- ... and so on ... -->
    </div>
</div>

Теперь я хотел бы добавить margin-top:20px ко всем столбцам маленького экрана и такое же поле для столбцов большого экрана, если их больше 4, так как это приведет к отображению двух «строк» ​​и, следовательно, потребуется некоторое расстояние между ними.

Возможно ли это как-то только с использованием CSS?

17
n00b

Вы можете использовать медиа-запрос для любого верхнего предела.

@media (max-width: 767px) {
    .col-xs-6 {
        margin-top:20px;
    }
}

http://www.bootply.com/126007

Постскриптум - Нет ничего плохого в том, что общее количество .col-* в .row превышает 12 (то есть: http://getbootstrap.com/css/#grid-example-mixed ). Это просто вызывает укутывание. Есть несколько примеров в документах, которые используют эту технику. Обычно это не идеально для вложенных строк.

29
Zim

Мне нужно что-то подобное, и вот решение, которое я придумал. Документирование это для будущих читателей (и меня)

$res-list: (xs: (0px, 767px), sm: (768px, 991px), md: (992px, 1199px), lg: (1200px, 9999px));
$dir-list: (t: top, r: right, b: bottom, l: left);

@for $r from 1 through 10{
  @each $res-abbr, $res-vals in $res-list{
    @media (min-width: nth($res-vals, 1)) and (max-width: nth($res-vals, 2)) {
      @each $dir-abbr, $dir-name in $dir-list{
        $x: $r * 5;
        .m#{$dir-abbr}-#{$res-abbr}-#{$x}{
          margin-#{$dir-name}: #{$x}px;
        }
        .m#{$dir-abbr}-#{$res-abbr}-#{$r}p{
          margin-#{$dir-name}: #{$r}unquote('%');
        }
      }
    }
  }
}

Этот код SASS генерирует классы в соответствии с 

@media (min-width: 0px) and (max-width: 767px) {
    .mt-xs-5 { margin-top: 5px; }
    .mt-xs-1p { margin-top: 1%; }
    .mr-xs-5 { margin-right: 5px; }
    .mr-xs-1p { margin-right: 1%; }
    .mb-xs-5 { margin-bottom: 5px; }
    .mb-xs-1p { margin-bottom: 1%; }
    .ml-xs-5 { margin-left: 5px; }
    .ml-xs-1p { margin-left: 1%; } 
}

Таким образом, редактор содержимого может использовать .mt-xs-10 для применения margin-top: 10px к данному элементу на экране extra-small.

Надеюсь, это кому-нибудь поможет.

5
Ejaz

Это старый пост, но ниже это чистое решение.

[class*="col-"] {
  margin-bottom: 15px;
}

Это хорошо работает в некоторых ситуациях, но добавляет дополнительное, ненужное поле, когда оно не нужно .... Чтобы решить эту проблему, мы можем создать новый класс CSS, который применяет верхнее поле к столбцам, когда они сложены. Я создаю класс с именем .row-grid 

.row.row-grid [class*="col-"] + [class*="col-"] {
  margin-top: 15px;
}

@media (min-width: 1200px) {
  .row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  .row.row-grid [class*="col-md-"] + [class*="col-md-"] {
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  .row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
    margin-top: 0;
  }
}
2
Muhammad Tanweer

Я использую это простое и чистое решение:

.row { margin-top: -15px; }
.row > div { margin-top: 15px; }

Таким образом, каждый <div class='col-*-*'> имеет поле в 15px сверху, кроме тех, что находятся в первом ряду (или, на мобильном телефоне, кроме того, что находится сверху).

0
Marco Panichi