Bootstrap - 如何将列高设置为多行？答案

【问题标题】：Bootstrap - How to set column height to more than one rows?Bootstrap - 如何将列高设置为多行？
【发布时间】：2019-04-16 04:57:44
【问题描述】：

我有一个需要为桌面创建的引导图像网格，你可以看到下面的布局。

我遇到的问题是中心框超过两行，所以我不知道如何实现它。可能是一个新手问题，但非常感谢任何帮助！

【问题讨论】：

如何让中间的盒子排成一排，外面的盒子也排成一排，但你只是把两个盒子排成一排。

标签： html css twitter-bootstrap twitter-bootstrap-3 responsive-design

【解决方案1】：

您可以通过将大盒子放在一排，将外面的小盒子放在同一排来实现这一点，其中两个较小的盒子只是一排的两个盒子。（两者的高度均为 50%）。

查看下面的 sn-p 以获取工作示例：

.box {
  height: 100%;
  width: 100%;
  background-color: lightgrey;
}

.box-container {
  width: 100%;
  height: 50%;  
  padding: 2px;
}

.big-box {
  height: 200px;
  background-color: lightgrey;
}

.col-3, .col-6 {
  padding: 0 !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
<div class="row">
  <div class="col-3">
    <div class="box-container"><div class="box"></div></div>
    <div class="box-container"><div class="box"></div></div>
  </div>
  
  <div class="col-6">
    <div class="big-box"></div>
  </div>
  
  <div class="col-3">
    <div class="box-container"><div class="box"></div></div>
    <div class="box-container"><div class="box"></div></div>
  </div>
</div>

</div>

注意：我已经使用 col-3 和 col-6 来适应示例窗口，但是，如果你想要响应，你可以使用 col-md-3 和 col-md-6 (或 sm 而不是 md 如果您希望它以更小的尺寸折叠）。

【讨论】：

【解决方案2】：

应该这样做..

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">1</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">2</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="well">3
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">4</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="well">6</div>
    </div>
    <div class="col-md-6">
        <div class="well">7</div>
    </div>
</div>

【讨论】：

感谢完美！不知道你可以嵌套行和列

【解决方案3】：

网格有 12 列。如果您的行中的总网格的总和大于 12，则网格可能会重叠。您可以将所有内容放在一行中，然后将它们划分为 3。将第一个和第三个设为 2 行，并将中间的一个设为中间行。

如果你分享你的代码会更容易理解。

【讨论】：