问引导4-嵌套列.在col 11内拟合4列
EN

Stack Overflow用户

提问于 2018-10-16 15:03:33

回答 1查看 7.8K关注 0票数 2

我试着在一个col-11内安装4列，但是这些都是垂直堆叠的。有人能帮我纠正/解释一下这种行为吗？下面是相同的代码和代码示例：

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

Stack Overflow用户

回答已采纳

发布于 2018-10-16 15:06:26

我很确定你只需要一个row在你的col-11里

<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

票数 11

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52838531

复制

相似问题

问引导4-嵌套列.在col 11内拟合4列
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4-嵌套列.在col 11内拟合4列EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4-嵌套列.在col 11内拟合4列
EN