我有一个我试图创建的布局,在移动设备上非常简单:
[A] [B] [C]
但是在桌面上,我试图让[B]变大并移到右侧,而A和C堆叠在左边.
[ A ][ B ] [ C ][ B ]
Bootstrap 4可以这样做,还是我需要编写自己的网格css?
更新:这是我现在拥有的基本布局的示例:
.a { background-color: red; } .b { background-color: blue; } .c { background-color: green; } img {max-width: 100%; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="a col-md-5"> A </div> <div class="b col-md-7"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg" alt="B (should be right of A and C on desktop)" /> </div> <div class="c col-md-5"> <p>C (should be below A and left of B on desktop)</p> </div> </div> </div>
https://codepen.io/nfriedly/pen/rqMLBw
更新2:这里有一些图片来澄清事情. ([A]为红色,[B]为蓝色(带图像),[C]为绿色.)
目前的布局:
所需的布局:
解决方法
您可以在桌面上使[B]绝对,并让它粘在容器的右侧.使用这个CSS:
@media (min-width: 600px) { .container {position: relative;} .b {position: absolute; right: 0; top: 0;} }
请注意,600px应该等于桌面断点.
这是一个working version.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。