Question

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

现在我要做：

   <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

查看BS4 docs about the grid system后，必须确保先拥有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 2

请记住，当您使用没有任何数字或断点的col类时，您只是在告诉该元素为一列，并使用该行中的所有可用空间。因此，如果您放置多个col类，则所有类的空间均等地分配，因此，该行不会包装元素，因此当您调整屏幕大小时，该行以及元素都会对其进行调整内部。

要包装元素，必须具体说明每列的大小，以便当该大小不适合行时；然后它将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 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。当“屏幕<768像素”采用全宽（col-sm-12）时，列的大小将重新调整。

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

4 个答案: