Bootstrap 4 - 嵌套列 - 在 col-11 内安装 4 列 [重复]答案

【问题标题】：Bootstrap 4 - Nested columns - Fitting 4 columns inside col-11 [duplicate]Bootstrap 4 - 嵌套列 - 在 col-11 内安装 4 列 [重复]
【发布时间】：2019-03-21 04:01:56
【问题描述】：

我试图在 col-11 内放置 4 列，但这些列垂直堆叠。有人可以帮我纠正/解释这种行为吗？这是相同的代码和codepen示例：

https://codepen.io/anon/pen/VEyyOp

<!DOCTYPE html>
<html lang="en">

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

<body>
    <div class="container-fluid no-gutters">

        <div class="row no-gutters">
            <div class="col-1">PHASES</div>
            <div class="col-11 no-gutters">
                <div class="col-3 col-md-3 col-sm-3 col-lg-3">DISCOVER</div>
                <div class="col-3 col-md-3 col-sm-3 col-lg-3">DESIGN</div>
                <div class="col-3 col-md-3 col-sm-3 col-lg-3">DELIVER</div>
                <div class="col-3 col-md-3 col-sm-3 col-lg-3">DEPLOY</div>
            </div>
        </div>
    </div>
</body>

</html>

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

我很确定您只需要在您的 col-11 中添加一个 row：

<div class="col-11 no-gutters">
  <div class="row">
    <div class="col-3 col-md-3 col-sm-3 col-lg-3">DISCOVER</div>
    <div class="col-3 col-md-3 col-sm-3 col-lg-3">DESIGN</div>
    <div class="col-3 col-md-3 col-sm-3 col-lg-3">DELIVER</div>
    <div class="col-3 col-md-3 col-sm-3 col-lg-3">DEPLOY</div>
  </div>
</div>

https://codepen.io/anon/pen/MPrQVa

【讨论】：

谢谢蒂姆。这对我有用。
没问题。检查标记为重复的问题，解释发生了什么。我对 bootstrap 4 不了解，但显然“在 Bootstrap 4 中，未放置在 .row 中的 .col- 将垂直堆叠。”