时间戳

首页 > 解决方案 > 如何在引导程序 4 中制作相等的 5 列？

javascript - 如何在引导程序 4 中制作相等的 5 列？

问题描述

我必须连续创建 5 列，但有时它可能连续少于 5 列，我该如何管理？

我的代码：-

.col {
  border: solid;
  margin: 2px;/* this can be added without breaking the row */
}
.col:before {
content:attr(class);/* show class used */
color:crimson
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
      <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    
<div class="w-100"></div>

    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>

<div class="w-100"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
</div>

例如： - 现在我如何管理最后两个盒子，我希望所有盒子都应该像第一行盒子宽度一样......

谢谢你！

标签： javascripthtmlcssbootstrap-4

解决方案

如果我对您的理解正确，您希望所有列的宽度始终与前两行中的列相同。如果这是正确的，您可以覆盖max-widthBootstrapcol类的属性。

像这样（使用您未更改的 HTML）：

.col {
  border: solid;
  margin: 2px;
  /* this can be added without breaking the row */
  max-width: 18% !important;  /* added. note, if you remove the margin above, you could set this to 20% */
}

.col:before {
  content: attr(class);
  /* show class used */
  color: crimson
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>

    <div class="w-100"></div>

    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>

    <div class="w-100"></div>

    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

您可能还希望使用该width属性为所有列设置恒定宽度。但我可能会误解你想要做什么。

推荐阅读