Bootstrap-4 中每行 5 列答案

【问题标题】：5 columns per row in Bootstrap-4Bootstrap-4 中每行 5 列
【发布时间】：2021-04-02 14:27:05
【问题描述】：

我有 15 条记录，我想在每行 5 列中显示所有记录。所以我正在使用引导程序 4“.col”中可用的自动列，有没有办法限制每行的列数？

注意：我必须不断循环列而不破坏行。

我想实现这样的目标

[ 1][ 2][ 3][ 4][ 5]
[ 6][ 7][ 8][ 9][10]
[11][12][13][14][15]

这是我当前的代码：

<div class="row">
    <!-- this will create 15 col -->
    <div class="col" ng-repeat="record in records">
        {{record.title}}
    </div>
</div>

但这会导致：

[1][2][3][4][5][6][7][8][9][10][11][12][13][14][15]

【问题讨论】：

Bootstrap 应该在溢出时自动断行。你可以试试col-3吗？如果没有，请尝试将行包装在具有类容器的 div 中。
@Hypenate 每行 4 列如果你使用col-3。
只需在您的 div.col 之后添加该行 <div class="w-100" ng-if="($index +1) % 5 === 0"></div> 参见 Equal-width multi-row

标签： bootstrap-4

【解决方案1】：

2019 年 12 月 2 日更新

对于 Bootstrap

只需将我的 .w-20 类添加到您的 CSS。

在我的小提琴中看到它的实际效果。

对于 Bootstrap >= 4.4：使用全新的 row-cols-* 类

将.row-cols-5 添加到您的.row 包含元素。无需自定义 CSS。

在此处查看 4.4 文档：https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

现在玩我的小提琴，并在我的小提琴中观察两种技术的相同结果：

.w-20 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20% !important;
          flex: 0 0 20% !important;
  max-width: 20%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 - How to set 5 columns per row</h1>
        <p class="lead">by djibe.</p>
        <p class="text-muted">(thx to BS4)</p>
        <h2>Tutorial</h2>
        <h3>With Bootstrap 4.4+</h3>
        <p>Just add <code>row-cols-5</code> to the row containing your elements</p>
        <div class="container-fluid">
          <div class="row row-cols-5">
            <div class="col card card-body">
            .col
            </div>
            <div class="col card card-body">
            .col
            </div>
            <div class="col card card-body">
            .col
            </div>
            <div class="col card card-body">
            .col
            </div>
            <div class="col card card-body">
            .col
            </div>
            <div class="col card card-body">
            .col
            </div>
            <div class="col card card-body">
            .col
            </div>
          </div>
        </div>
        <hr class="my-5">
        <h3>With Bootstrap &lt; 4.4</h3>
        <ol>
        <li>We gonna use the magic of CSS3 flexboxes ... or just import row-cols-* classes from BS 4.4.</li>
        <li>Apply the class .w-20 on each element, it will spread each element on 1/5th of the width or row</li>
        <li>Apply the built-in Bootstrap 4 classes d-flex and flex-wrap to the container of these 15 elements</li>
        <li>Et voilà</li>
        <li>This fiddle is crap so I had to add the !important definition to my CSS class. But you can get rid of them in your project.</li>
        </ol>
        <div class="d-flex flex-wrap">
          <div class="card card-body w-20">
          <p>
          Card 1
          </p>
          <p>
          Extra long content compared to the cards of the same row but all the elements will have the same height
          </p>
          </div>
          <div class="card card-body w-20">
          Card 2
          </div>
          <div class="card card-body w-20">
          Card 3
          </div>
          <div class="card card-body w-20">
          Card 4
          </div>
          <div class="card card-body w-20">
          Card 5
          </div>
          <div class="card card-body w-20">
          Card 6
          </div>
          <div class="card card-body w-20">
          Card 7
          </div>
          <div class="card card-body w-20">
          Card 8
          </div>
          <div class="card card-body w-20">
          Card 9
          </div>
          <div class="card card-body w-20">
          Card 10
          </div>
          <div class="card card-body w-20">
          Card 11
          </div>
          <div class="card card-body w-20">
          Card 12
          </div>
          <div class="card card-body w-20">
          Card 13
          </div>
          <div class="card card-body w-20">
          Card 14
          </div>
          <div class="card card-body w-20">
          Card 15
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

感谢分享这个想法，我认为这是根据要求制作专栏的最佳方式。
这很好用，尽管存在一个问题，即它不会破坏移动视图的行，就像我使用 col-md-* 或其他任何东西一样。

【解决方案2】：

如果您使用的是 Bootstrap 4 scss 文件，那么最简单的方法是使用默认的 mixin make-col(x,y)。例如，5 列布局中的此代码将创建覆盖 2 列宽度的元素。基本上是 2/5 = 40%：

.my-col {
    @include make-col(2, 5);
}

这将导致以下css：

.my-col {
    flex: 0 0 40%;
    max-width: 40%;
}

【讨论】：

【解决方案3】：

在最新版本的引导程序中，您可以通过使用row-cols-* 类来做到这一点。

例如： row-cols-3, row-cols-md-3 像这样。

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

更多详情请至Visit

【讨论】：

【解决方案4】：

您似乎使用AngularJS。如果是这样，请使用ng-reapt-start 和ng-repeat-end 并通过$index 跟踪列表中的项目。使用break columns 并仅在($index + 1) 为5、10 或15 时显示。

var app = angular.module('breakColumn', []);

app.controller('MainCtrl', function($scope) {
  $scope.list = [];
  for (let i = 1; i < 16; i++) {
    $scope.list.push(i)
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div class="container" ng-app="breakColumn">
  <div class="row" ng-controller="MainCtrl">
    <div class="col bg-primary p-4 mb-3" ng-repeat-start="item in list track by $index" ng-init="itemIndex = $index">
      {{item}}
    </div>
    <!-- break column -->
    <div class="w-100" ng-repeat-end ng-if="(itemIndex +1) % 5 === 0"></div>
  </div>
</div>

【讨论】：

这是一个不错的技巧:)。谢谢。我正在寻找更简单的方法。
@Christopher 也告诉我。