Bootstrap 4 卡列分为 2 行答案

【问题标题】：Bootstrap 4 cards column into 2 rowsBootstrap 4 卡列分为 2 行
【发布时间】：2020-07-16 18:52:38
【问题描述】：

我正在尝试排列 2 列而不是 3 列。我知道我可以使用 CSS 覆盖并获得 2 列，如下所示，但我想知道是否有开箱即用的引导方法：

.card-columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

这是 HTML：

<div class="card-columns">
  <div class="card">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card This is a longer card This is a longer card This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
</div>

CSS：

.card {
  padding: 15px;
}

演示：https://jsfiddle.net/no8z36sc/

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

据我所知，您正试图在一行中显示 2 张卡片，试试这个

 <div class="row">
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
          <div class="card">
           <p>This is a longer card with supporting text below as a natural lead-in to 
              additional content. This content is a little bit longer.
           </p>
          </div>
       </div>
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
          <div class="card">
           <p>This is a longer card with supporting text below as a natural lead-in to 
              additional content. This content is a little bit longer.
           </p>
          </div>
       </div>
     </div>

【讨论】：

重复所有的变化是没有意义的——如果它们在所有视口都相同，只需使用col-6
没有。如果其中一个卡片内容的长度不同，则会产生间隙。
以上代码将在单行中给出 2 列相同宽度的列，但如果您试图在内容长度变化的情况下使卡片垂直相等，则可以使用 class="card h-100"。希望对您有所帮助。

【解决方案2】：

到目前为止，不存在任何用于 column-count css 属性的 Bootstrap class

这个问题在Github 上的2017 中被提出，但bootstrap 仍然没有在类的帮助下安排columns 的功能

然而，有一个不使用CSS 的解决方案。由于开发人员构建了bootstrap 中所需的功能

例如，您不能为像这样的小型设备设置宽度：w-sm-75 或像这样的中型设备w-md-50

Bootstrap width 属性只能使用w-75 或w-100 等。

存在与bootstrap 配合使用的外部stylesheet CDN 链接，该链接目前处于开发模式，并根据开发人员的需要不断包含功能

借助这张表，您可以为不同的设备设置width

w-sm-50 w-md-100 w-50

它还包含column-count 属性，使用car-col-2 之类的类

car 正在定义卡片

col 正在定义列数

2 定义了你想要的列数，现在它的范围从1 到6

如果你使用car-col-2 css 类，这就是你的工作的样子

一件重要的事情：此功能尚未在不同的设备上引入。

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<!-- Stylesheet for card-columns-count and for some other features currently in development mode -->
<link rel="stylesheet" href="https://drive.google.com/uc?id=1jLrfISsLUcRiwgNl0koSfsS6lylj0E7h">




<div class="card-columns car-col-2">
  <div class="card">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card This is a longer card This is a longer card This is a longer card</p>
  </div>
  <div class="card">
    <p>This is a longer card</p>
  </div>
</div>

JSFIDDLE：https://jsfiddle.net/urqf0e61/

【讨论】：

【解决方案3】：

1) 将“card-columns”类重命名为“row”类。

2) 为所有卡片 div 添加 'col-3' 类。

您的代码应如下所示，

<div class="row">
  <div class="card col-3">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card This is a longer card This is a longer card This is a longer card</p>
  </div>
  <div class="card col-3">
    <p>This is a longer card</p>
  </div>
</div>

【讨论】：

【解决方案4】：

您可以使用 CSS 网格布局轻松实现它。根据您在 CSS 属性 grid-template-columns 中的要求调整列数设置 NO_OF_COLUMNS：repeat(NO_OF_COLUMNS, 1fr);

.card {
      padding: 15px;
      height: auto;
      display: flex;
 }

.card-columns{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 1fr;
      grid-column-gap: 20px;
      grid-row-gap: 10px;
      overflow: hidden;
}

更多信息可以参考https://alligator.io/css/css-grid-layout-fr-unit/

JS-Fiddle 演示：https://jsfiddle.net/xskrtfgq/

【讨论】：