Question

在这种情况下，无论设备大小如何，我都需要使第1行和第2行中的文本保持对齐，而在第2行中不显示左侧的间隙。

我尝试应用m-1，p-1，左侧文本甚至是负填充，但是没有一个删除第2行中的前导空格。

<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>

Answer 1

您需要在容器内使用row，以container的负边距补偿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>

如何在Bootstrap 4容器流体中左侧对齐元素

1 个答案: