Bootstrap 4 выравнивает div влево и вправо, для маленького экрана показывает их в отдельных строках

Question

Ниже приведен код, который я пробовал: Я хочу изображение слева и кнопки справа. Для маленьких экранов кнопки должны перемещаться под изображением в новом ряду.

<div class="row">
  <div class="col-12">
    <div class="d-flex justify-content-lg-between">
      <div>
        <img src="http://placehold.it/300x300" alt="" class="coverImage">
      </div>
      <div>
        <button class="btn btn-success">Follow</button>
        <button class="btn btn-success">Add to Favourite</button>
      </div>
    </div>
  </div>
</div>

Но на маленьком экране правая часть (кнопки) просто совмещается с изображением в том же ряду.

Answer 1

• Используйте col-6
• Используйте text-right для выравнивания кнопок на правой стороне

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div>
        <img src="http://placehold.it/300x300" alt="" class="coverImage">
      </div>
    </div>

    <div class="col-md-6 text-right">
      <button class="btn btn-success">Follow</button>
      <button class="btn btn-success">Add to Favourite</button>
    </div>
  </div>
</div>

---

Если вы хотите выровнять кнопку с левой стороны для md экранов, используйте text-md-left также.

Answer 2

Используйте класс d-flex , используйте flex-md-column для отображения изображения по вертикали и кнопки ниже для устройств среднего и большого экрана, а также flex-md-строка для отображения горизонтального изображения и правых боковых кнопок на маленьких экранах.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="d-flex flex-md-column flex-sm-row justify-content-between">
      
        <img src="http://placehold.it/300x300" alt="" class="coverImage">
   
        <div class="button-div">
          <button class="btn btn-success">Follow</button>
          <button class="btn btn-success">Add to Favourite</button>
        </div>
  </div>
</div>

Answer 3

Обернуть каждую часть <div class="col-md-6"> (изображение и кнопки)

col-md-6, что означает, что на экране sm это будет 12

См. Скрипку: https://jsfiddle.net/uhgztkqb/2/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-6">
    <div>
      <img src="http://placehold.it/300x300" alt="" class="coverImage">
    </div>
  </div>

  <div class="col-md-6">
    <button class="btn btn-success">Follow</button>
    <button class="btn btn-success">Add to Favourite</button>
  </div>
</div>
</div>

Изменить, чтобы выровнять по правому краю кнопки: text-md-right по секундам div class="col-md-6"

<div class="col-md-6 text-md-right">

См. Скрипку: https://jsfiddle.net/uhgztkqb/8/

Узнайте здесь: https://getbootstrap.com/docs/4.0/utilities/text/