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

包装每个部分<div class="col-md-6">（图像和按钮）

col-md-6是什么意思在sm屏幕中是12

请参见小提琴：HLSIM

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

在这里学习：https://jsfiddle.net/uhgztkqb/8/

Answer 2

使用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 3

使用类 d-flex ，使用 flex-md-column 来垂直显示图像，并在大中型设备的按钮下方显示，并使用 flex- md-row 用于在小屏幕上水平显示图像和右侧按钮。

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

Bootstrap 4将div左右对齐，以小屏幕显示在单独的行中

3 个答案: