每行 5 列引导程序 4 不起作用

Question

我需要在行网格引导程序 5 中做 4 列。我该怎么做？

现在我做到了：

   <div class="row">
       <div class="col col1"></div>
       <div class="col col2"></div>
       <div class="col col3"></div>
       <div class="col col4"></div>
       <div class="col col5"></div>
   </div>

当我调整文档大小时，我的块不会转到底部。为什么？我该怎么做？

Answer 1

请记住，当您使用没有任何数字或断点的 col 类时，您只是告诉元素是一列并使用行中的所有可用空间; 因此，如果您放置多个col类，则所有类的空间将平均分配，因此该行不会包装 elments， 当您重新调整屏幕时，该行会根据它以及其中的元素进行调整。

为了使元素换行，

你必须具体说明每列的大小，所以当该大小不适合行时;然后它将换行到新行中，即col-*-*类所做的。

您应该在此处阅读引导网格系统的工作原理：https://getbootstrap.com/docs/4.3/layout/grid/

.col {
  border: 1px solid black;
  min-height: 50px;
}
.col-6 {
  border: 1px solid black;
  min-height: 50px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col col1"></div>
  <div class="col col2"></div>
  <div class="col col3"></div>
  <div class="col col4"></div>
  <div class="col col5"></div>
</div>
<div class="row">
  <div class="col-6 col-md-2 col1"></div>
  <div class="col-6 col-md-2 col2"></div>
  <div class="col-6 col-md-2 col3"></div>
  <div class="col-6 col-md-2 col4"></div>
  <div class="col-6 col-md-2 col5"></div>
</div>

Answer 2

在查看了有关网格系统的 BS4 文档后，您必须确保拥有 container 、 row ，然后col-sm|col-md|... 。例如：

<div class="container">
   <div class="row">
       <div class="col-sm col1"></div>
       <div class="col-sm col2"></div>
       <div class="col-sm col3"></div>
       <div class="col-sm col4"></div>
       <div class="col-sm col5"></div>
   </div>
</div>

">

sm"、"md"、"lg"等是指列换行的屏幕尺寸，即"XS"通常是移动屏幕。

Answer 3

尝试指定大小(最大 12

(。

<div class="container">
    <div class="row">
           <div class="col col-1"></div>
           <div class="col col-2"></div>
           <div class="col col-3"></div>
           <div class="col col-4"></div>
           <div class="col col-2"></div>
    </div>
</div>

https://getbootstrap.com/docs/4.3/layout/grid/

Answer 4

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row justify-content-center">
           <div class="col-md col-sm-12">col-1</div>
           <div class="col-md col-sm-12">col-2</div>
           <div class="col-md col-sm-12">col-3</div>
           <div class="col-md col-sm-12">col-4</div>
           <div class="col-md col-sm-12">col-5</div>
    </div>
</div>

在这里，我使用的是引导程序 4。当"屏幕<768px"以采用全宽 (col-sm-12( 时，列将调整大小。