загрузчик 4 с использованием float-right получил вертикальные проблемы

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

Вы захотите добавить .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>

Answer 2

Вместо <div class="card mb-3 w-75 float-right">

Установите для левого поля значение auto, при этом этот элемент div будет сдвигаться вправо до конца и оставит свободным область слева.

Как это: <div class='card mb-3 w-75 ml-auto">