html - Bootstrap 4 左右对齐 div,对于小屏幕,将它们显示在单独的行中
问题描述
下面是我尝试过的代码:我想要左边的图像和右边的按钮。对于小屏幕,按钮应移动到图像下方的新行中。
<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>
但在小屏幕上,右侧部分(按钮)只是与同一行上的图像内联堆叠。
解决方案
- 利用
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
也可以使用。
推荐阅读
- linux - 在我的所有文件外壳中查找并替换代码片段
- ios - 如何本地化通知消息localizedUserNotificationString的字符串插值?
- java - 将对象添加到arraylist的最后一个元素
- python - 网络x。图形可视化.Python.圆形布局
- javascript - 如何使用 JavaScript 根据块的颜色更改 div 元素的颜色?
- android - 无法找到 ADB,但 adb.exe 仍然存在于 Sdk Platforms-tool 文件夹中
- angular - 如何使用 Angular 中的范围滑块过滤数据?
- django - 在 GAE flex/custom 中为 django API 应用自定义 nginx.conf
- python - 如何修复这个 qouting 在 python 中读取 csv 文件时必须是整数
- python - 如何单击硒中的按钮?