Question

在商店的首页上展示产品时，我很难过。

   <div class="row">

  @foreach($produts as $product)  //this is the syntax of my templating engine

   <div class="col-md-3">
  </div>


  @endforeach
 </div>

当我使用col-md-3（显示4个产品）时，产品在屏幕上显得太大；当我使用col-md-2（显示6个产品）时，产品看起来太小。所以我想将其分为5列。这不是成为完美主义者的问题，这是非常矛盾的，这完全破坏了设计。我读到一个问题，说要使用class =“ col”，但对我来说这是行不通的，因为我正在以编程方式添加多个产品。产品分为几个“行”。我真的希望引导程序有24列而不是12列。是否有一种引导程序来完成我想要的工作，或者我必须触发一些纯CSS？

Answer 1

只需将其添加到您的CSS中即可。

.col-20 {-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;}
@media (min-width: 576px) {.col-sm-20 {-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;}}
@media (min-width: 768px) {.col-md-20 {-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;}}
@media (min-width: 992px) {.col-lg-20 {-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;}}
@media (min-width: 1200px) {.col-xl-20 {-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;}}

您可以将自定义类 col-20 与标准的Bootstrap4 cols结合使用。

<div class="col-xl-20 col-lg-4 col-md-6">...

Answer 2

您实际上可以使用类col-md-offset-1的空div向右推产品1列，然后使用col-md-2显示产品。它将在中间而不是一侧显示5个产品。下面是一个例子。

 <div class="row">

<div class="col-md-offset-1">
<div>

@foreach($produts as $product)  //this is the syntax of my templating engine

<div class="col-md-2">
    $product
</div>


@endforeach

Answer 3

您可以像这样添加自定义类

<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-5th">
    </div>
</div>

并为最小宽度添加CSS样式：1200px

@media (min-width: 1200px) {
    .col-xl-5th {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

以编程方式添加列时如何在Bootstrap 4中创建5列的行

3 个答案: