gpt4 book ai didi

css - 如何在 bootstrap 4 container-fluid 中左对齐元素

转载 作者:行者123 更新时间:2023-11-28 14:44:57 25 4
gpt4 key购买 nike

在这种情况下,无论设备大小如何,我都需要第 1 行和第 2 行中的文本左对齐,而第 2 行中不会出现左侧间隙。

我尝试应用 m-1、p-1、text-left,甚至负填充,但没有一个删除第 2 行中的前导空格。谢谢。

JSFiddle containing problem code Here

<h4>Line 1-Header4 </h4>
<div class="container-fluid">
<h4> Line2-Header4 </h4> <!-- HERE IS THE ISSUE -->
<div class="row zz-border-Top2
border-bottom border-primary text-center bg-light">
<div class="col-sm-1 font-weight-bold text-dark bg-warning">
<h6>Text1</h6>
</div>
<div class="col-sm-2">
<h6> Text 2 </h6>
</div>
<div class="col-sm-9 text-left" style="color:navy;">
<h6>Text 3</h6>
</div>
</div>
</div>

最佳答案

需要在容器内部使用row来补偿container添加的padding与row的负边距

<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<h4>Line 1-Header4 </h4>
<div class="container-fluid">
<div class="row">
<h4> Line2-Header4 </h4> <!-- HERE IS THE ISSUE -->
</div>
<div class="row zz-border-Top2
border-bottom border-primary text-center bg-light">
<div class="col-sm-1 font-weight-bold text-dark bg-warning">
<h6>Text1</h6>
</div>
<div class="col-sm-2">
<h6> Text 2 </h6>
</div>
<div class="col-sm-9 text-left" style="color:navy;">
<h6>Text 3</h6>
</div>
</div>
</div>

关于css - 如何在 bootstrap 4 container-fluid 中左对齐元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52434593/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com