每行 5 列引导程序 4 不起作用 [关闭]答案

【问题标题】：5 columns per row bootstrap 4 is not work [closed]每行 5 列引导程序 4 不起作用 [关闭]
【发布时间】：2019-04-16 18:49:39
【问题描述】：

我需要在行网格引导程序 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>

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

【问题讨论】：

这能回答你的问题吗？ Bootstrap - 5 column layout

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

请记住，当您使用没有任何数字或断点的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>

【讨论】：

请看这个页面：stackoverflow.com/tags?page=2&tab=popular我需要网格如何在这个页面上使用标签
@Mafys Bootstrap 文档有所有可用于复制该布局的信息，请阅读它们...在我的回答中，我向您解释，如果您希望列根据屏幕调整大小和换行宽度你必须使用断点类，如 col-sm-4，甚至 col-auto
with col-auto col-md-2 col1 我没有得到 100% 的布局。我在右边有一个空间。
@MafysGrif 你为什么要这样使用它？我认为不清楚您在问什么，您最初的问题是关于 5 列的行不换行，这就是大多数人正在回答的问题......我解释了行和列的工作原理，并提供了进一步文档的链接；要么尝试先阅读它们，因为那里解释了你需要的内容，要么改写你的问题......不过，如果你正在做类似 SO 的标签页面之类的事情，它分为 4 列，而不是 5
@MafysGrif 还要记住，StackOverflow 的页面使用 CSS Grid，而不是 Bootstrap，它本身是在 Flexbox 上制作的

【解决方案2】：

查看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”通常是移动屏幕。

【讨论】：

col 是一个有效的类，但它会根据行上的可用空间进行调整
不。请参阅调整此页面的大小：stackoverflow.com/tags?page=2&tab=popular 当调整大小的元素以 1 位于底部时。
@MafysGrif 那个页面是否相关，因为我不确定 SO 是否使用 BS，或者至少在那个页面上...... @IvanS95 可能是，但是我的回答也解决了另一个问题，那就是使用container（提问者可能已经这样做了，但如果不考虑诸如虚假CSS类冲突/覆盖等晦涩的问题路线，那是唯一可能出现的问题。
@samhuk 我刚刚提到了col 类，因为您将它们更改为col-sm，只是想明确一点，col 也是一个有效的类

【解决方案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/

【讨论】：

【解决方案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。当“屏幕

【讨论】：