Question

我想将bootstrap行划分为 5等份。它包括12-col-md，那么我如何将它分成相等的5个部分呢？

任何人都可以帮我解决这个问题吗？

Answer 1

解决此问题的一个好方法是here！

默认情况下，Bootstrap不提供允许我们创建五列布局的网格系统，但正如您所看到的那样，它非常简单。首先，您需要以Bootstrap的方式创建默认列定义。我打电话给我的班级col -..- 15。

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

接下来，您需要在不同媒体查询的情况下定义新类的宽度。

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

现在您已准备好将类与原始Bootstrap类组合在一起。例如，如果你想在中等屏幕上创建表现为五列布局的div元素，而在较小的屏幕上创建四列，则只需要使用以下内容：

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

Answer 2

旧引导版本

使用具有span2类的五个div，并为第一个类提供offset1。

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

五个等间距和居中的列。

<小时/> 在bootstrap 3.0和4 alpha。

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

<小时/> CUSTOM STYLE

自定义样式

.container {width:100%; float:left;}
.col1{ width:20%; float:left}

最新的表样式

.container {width:100%;display:table;}
.col1{ width:20%; display:table-cell;}

Answer 3

您可以使用类似

的内容

<div class="container">
  <div class="col-sm-2 col-sm-offset-1"></div>
  <div class="col-sm-2"></div>
  <div class="col-sm-2"></div>
  <div class="col-sm-2"></div>
  <div class="col-sm-2"></div>
</div>

第一个容器将具有偏移量，因此左侧和右侧将具有相同的边距（col-sm-1），内部有5个相同的容器。

Answer 4

如果您使用的是引导程序4，这很简单，不确定是否也可以在引导程序3中使用

<div class="container-fluid">
<h2>Bootstrap 4 Five Columns</h2>
<h5>Full-width (within .container-fluid)</h5>
<div class="row">
    <div class="col">
        <img src="//placehold.it/640x480" class="img-fluid">
    </div>
    <div class="col">

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

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

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

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

    </div>

</div>

Answer 5

您可以使用bootstrap-4默认的'col'属性来解决此问题。

<div class="row no-gutters">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

这将自动将给定的空间分为5个相等的部分。

注意：如果您想在任何其他屏幕上显示3列，这可能会引起问题。假设您要在中型屏幕上连续显示5列，则可以在每个元素上添加类“ col-md”。但是，如果您需要在sm屏幕上连续显示3列，那么您将面临问题。

Answer 6

您可以使用span2来占用最大空间。请找到代码：

<div class="row-fluid">
    <div class="span2">1</div>
    <div class="span2">2</div>
    <div class="span2">3</div>
    <div class="span2">4</div>
    <div class="span2">5</div>
</div>

Answer 7

在您的custromScript.css文件中使用此css属性以在大型设备中使用


    .col-lg-2-0 {
      position: relative;
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
    }

并使用类col-lg-2-0而不是col-lg-2来划分四列

Answer 8

 <div class="row">
         <div class="col-md-7">
             <div class="row">
                 <div class="col-md-4 bg-danger">1</div>
                 <div class="col-md-4 bg-success">2</div>
                 <div class="col-md-4 bg-danger">3</div>
             </div>
         </div>
         <div class="col-md-5">
                <div class="row">
                        <div class="col-md-6 bg-success">4</div>
                        <div class="col-md-6 bg-danger">5</div>
                    </div>
         </div>
     </div>

Answer 9

您可以自定义引导的CSS。您需要将scss文件导入您自己的custom.scss文件中。然后，您必须使用编译custom.scss到另一个文件中的CSS。例如：custom.css。请查看此链接以获取更多详细信息。 Bootstrap Theming

在custom.scss文件中

$grid-columns:15;
@import "node_modules/bootstrap/scss/bootstrap";

然后，您可以在项目中使用col- {breakpoint} -3来具有5个等宽的列。

小心

这将是全球性的。如果您在项目的其他位置使用了默认的12点网格系统，则还必须更改其他文件。

Answer 10

您可以使用 row-cols-*（例如：row-cols-3、row-cols-md-3）类来满足您的要求。

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

了解更多详情Visit to official bootstrap site

Answer 11

我建议使用表格而不是引导程序将其分为5部分，并且在每列内再次使用引导程序网格。

此答案可能会帮助您this

但是，如果您无法通过上述方法解决其他任何问题，请在下方评论。

如何将bootstrap行分成5个相等的部分？

11 个答案: