Question

我的模板上有评论部分，我使用w-75 float-right，但其他列也加入了我的评论范围。

这是我的模板代码。

      <div class="col-md-12 mb-3">
      ....
        <!-- comments with no parrent -->
        <div class="card mb-3">
          <div class="card-body">
          ....
          </div>
        </div>

        <!-- comments with parrent -->
        <div class="card mb-3 w-75 float-right">
        ....
        </div>
        <br>
      </div>

      <!-- comments Form -->
      <div class="col-md-12 mb-5">
        ....
      </div>

我不喜欢这样

Answer 1

代替 <div class="card mb-3 w-75 float-right">

将左侧页边距设置为自动，这会将该div元素一直推到右侧，并使该区域向左清除。

赞： <div class='card mb-3 w-75 ml-auto">

Answer 2

您将要添加.row类以强制换行，并确保每行正好有12列。为此，您需要删除w-75类，并将其父级与col-md-7一起更改为offset-md-5（总共12个）。这样一来，您的卡就可以在台式机屏幕上偏移（没有任何元素会进入左侧），并可以在移动屏幕上正确堆叠。

这可以在下面看到（单击Run code snippet，然后单击Full page查看偏移量）：

body {
  margin: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-12 mb-3">
    ....
  </div>
</div>

<div class="row">
  <div class="col-md-12 mb-3">
    <!-- comments with no parent -->
    <div class="card mb-3">
      <div class="card-body">
        ....
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-7 offset-md-5">
    <!-- comments with parent -->
    <div class="card mb-3">
      <div class="card-body">
        ....
      </div>
    </div>
    <br>
  </div>
</div>

<div class="row">
  <!-- comments Form -->
  <div class="col-md-12 mb-5">
    ....
  </div>
</div>

使用右浮动的引导程序4出现垂直问题

2 个答案: