Question

到目前为止，这是我的引导程序代码：

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

简单的4列设置。当前，它在大型（lg类）断点上分为单列。有什么办法可以设置它，使其在较大的断点处分成两列，然后在中等（md类）断点处分成一列？我一直在查看引导程序教程，找不到任何解决方案。

这是我的jsfiddle：https://jsfiddle.net/noe562h0/

Answer 1

尝试一下

section_id

以下是Bootstrap 4网格参考Bootstrap和w3schools.com文档。

Answer 2

如果要中断，则必须使用不同的断点。像这样：

<div class="container-flex">
  <div class="row">
    <div class="col-lg-6 col-md-12">1</div>
    <div class="col-lg-6 col-md-12">2</div>
    <div class="col-lg-6 col-md-12">3</div>
    <div class="col-lg-6 col-md-12">4</div>
  </div>
</div>

Answer 3

检查以下小提琴：

Grid Breakdown

Answer 4

https://jsfiddle.net/x4rjp1gq/

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

    </div>
</div>

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  text-align:center;
}

如何在引导网格中将4列拆分为两列然后是一列

4 个答案: