应用于div的.col-md-12不占用宽度的100％

时间：2018-04-21 02:27:44

标签： css bootstrap-4

我正在学习模型，我正在添加一个带有“holi1”字样的div，它应该占据12列，也就是说容器的整个宽度。但我想知道它为什么不占据宽度的100％。我该如何纠正？

enter image description here 

html,body{
 height:100%;
}
<body>
<div class="container h-100">
    <div class="row h-100 d-flex   justify-content-center align-items-center contenedor_centrado">
            <div class="row">
                <div class="col-12 col-md-12 botones_centrados d-flex align-items-center" style="border: 1px solid blue;">
                    holi1
                </div>                  
            </div>
    </div>
</div>
</body>

https://plnkr.co/edit/Xqxhs0Ggp1SSmk7226AV?p=preview

1 个答案:

答案 0 :(得分：1)

你有两层＆＃34;行＆＃34;彼此嵌套的类。如果你想同时拥有两者，那么你需要将col-12添加到内部行以使其占据整个宽度：

<body>
<div class="container h-100">
    <div class="row h-100 d-flex   justify-content-center align-items-center contenedor_centrado">
            <div class="row col-12">
                <div class="col-12 col-md-12 botones_centrados d-flex align-items-center" style="border: 1px solid blue;">
                    holi1
                </div>                  
            </div>
    </div>
</div>
</body>
相关问题
最新问题