Bootstrap 4 Group карты

Question

Я играл с новой группой карты compontent в Bootstrap 4, но имею следующий вопрос:

При использовании карты группы с 2-мя ряды границы будет сдвоенными означает верхний ряд (4), а нижняя (также 4) будет иметь дополнительную линию между ними.

 <div class="col-md-12"> 
     <div class="row"> 

     <div class="card-group"> 
     <div class="card"> 
      <div class="card-block"> 
      <h5 class="card-title">1</h5> 
      </div> 
     </div> 
     <div class="card"> 
      <div class="card-block"> 
      <h5 class="card-title">2</h5> 
      </div> 
     </div> 
     <div class="card"> 
      <div class="card-block"> 
      <h5 class="card-title">3</h5> 
      </div> 
     </div> 
     <div class="card"> 
      <div class="card-block"> 
      <h5 class="card-title">4</h5> 
      </div> 
     </div> 

     </div> 
     <div class="card-group"> 
     <div class="card"> 
      <div class="card-block"> 
      <h5 class="card-title">1</h5> 
      </div> 
     </div> 
     <div class="card"> 
      <div class="card-block"> 
      <h5 class="card-title">2</h5> 
      </div> 
     </div> 
     <div class="card"> 
      <div class="card-block"> 
      <h5 class="card-title">3</h5> 
      </div> 
     </div> 
     <div class="card"> 
      <div class="card-block"> 
      <h5 class="card-title">4</h5> 
      </div> 
     </div> 


    </div> 
    </div> 

Кто-нибудь знает, как правильно применять эти 2 строки?

Answer 1

Вам не требуется дополнительная надбавка к использованию .card-group.

• Колонки должны быть размещены внутри строки, а не наоборот.
• Установка только одной колонки с .col-md-12 является избыточной, поскольку она означает 100% ширины.
• Вы только должны использовать .container или .container-fluid и разместить там в карты напрямую, используя карты-группу в качестве строки, которая работает, потому что .card-group имеют display: table; и каждую карту в пределах есть display: table-cell поэтому он будет работать в качестве колонки.

Вот пример без дополнительной разметки: http://www.bootply.com/3Zb4ybq1iH

Вот как Bootstrap работает сетка.

• .container или .container-fluid имеют горизонтальную отступы из 0.9375rem отделить содержание краев браузера.
• Если вам необходимо разделить строку на столбцы, можно использовать класс .row которые имеет (отрицательный) горизонтального запаса из -0.9375rem что возвратов обивки контейнера.
• Но каждый столбец имеет горизонтальный отступы от 0.9375rem, и у вас снова есть разделение края браузера, но теперь на каждом столбце.

Несколько советов о grid system, которые вы можете найти в документации Bootstrap 3, который также работает на Bootstrap 4.

• Ряды должны быть размещены в пределах .container (фиксированной ширины) или .container-fluid (полная ширина) для правильного выравнивания и заполнения.
• Используйте строки для создания горизонтальных групп столбцов.
• Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк.
• Сетки столбцов создаются путем указания количества двенадцати доступных столбцов, которые вы хотите развернуть.Например, три равные колонки будут использовать три .col-xs-4