Question

我有15条记录，我想在每行5列中显示所有记录。所以我使用bootstrap 4“.col”中提供的auto列，有没有办法限制每行的列数？

注意：我必须连续循环列而不会破坏行。

我想实现类似的目标

[ 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]

Answer 1

摆脱这些Bootstrap列，只使用灵活的flexboxes。在我的小提琴中看到它。

.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.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>


<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>
        <p class="lead">
        Tutorial
        </p>
        <ol>
        <li>We gonna use the magic of CSS3 flexboxes</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>

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

Answer 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的更多详情

Answer 4

似乎您使用public function scopeForSubject(Builder $query, Model $subject): Builder { return $query ->where('subject_type', $subject->getMorphClass()) ->orWhere('subject_id', $subject->getKey()); }。如果是，请使用AngularJS和ng-reapt-start并按ng-repeat-end跟踪列表中的项目。使用break columns并仅在$index为($index + 1)，5或10时显示。

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

Bootstrap-4中每行5列

4 个答案: