我的布局中有三个元素，top bar、content 和 bottom bar。
我正在使用 twitter bootstrap 4
在移动设备上，我希望它们这样堆叠:
top bar
content
bottom bar
在桌面上我想要这个:
content top bar
bottom bar
视觉指南:
我怎么办？我似乎无法让他们正确排成一行，而且我已经走到了兔子洞的底部，所以我正在询问堆栈。
代码:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class=container>
<div class=row>
<div class="col-12 col-md-5 order-md-2">
<h3>Top Bar</h3>
</div>
<div class="col-12 col-md-7 order-md-1">
<h3>Content</h3>
<p>A bit of Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac turpis ac massa mollis posuere.</p>
<p>Duis urna purus, sagittis eget fermentum in, aliquam sed est.</p>
<p>Praesent imperdiet a nisi at aliquet. Curabitur velit mi, vestibulum sed molestie non, egestas sit amet elit.</p>
<p>Donec commodo tincidunt ligula sed pharetra. Etiam efficitur blandit laoreet. Aliquam eu pellentesque dui, eu accumsan dolor. Vestibulum congue facilisis porta. Praesent venenatis, risus eu mollis varius, erat est ornare felis, in rhoncus arcu metus eget ante.</p>
</div>
<div class="col-12 col-md-5 order-md-2 offset-md-7">
<h3>Bottom Bar</h3>
</div>
</div>
</div>
</body>最佳答案
在 Bootstrap 上禁用 flex 或在行上添加修饰符并设置
显示: block ；
将中间的 child 向左浮动，然后将顶部和底部的栏向右浮动。同时删除偏移量，以便它优雅地填充间隙。
这应该可以让你在桌面上得到你想要的东西；当然，您需要为您的移动断点删除它们。
<div class="container">
<div class=row style="display: block;">
<div class="col-12 col-md-5 order-md-2" style="float:right;">
<h3>Top Bar</h3>
</div>
<div class="col-12 col-md-7 order-md-1" style="float:left;">
<h3>Content</h3>
<p>A bit of Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac turpis ac massa mollis posuere.</p>
<p>Duis urna purus, sagittis eget fermentum in, aliquam sed est.</p>
<p>Praesent imperdiet a nisi at aliquet. Curabitur velit mi, vestibulum sed molestie non, egestas sit amet elit.</p>
<p>Donec commodo tincidunt ligula sed pharetra. Etiam efficitur blandit laoreet. Aliquam eu pellentesque dui, eu accumsan dolor. Vestibulum congue facilisis porta. Praesent venenatis, risus eu mollis varius, erat est ornare felis, in rhoncus arcu metus eget ante.</p>
</div>
<div class="col-12 col-md-5 order-md-2" style="float:right;" >
<h3>Bottom Bar</h3>
</div>
</div>
</div>
关于html - Bootstrap 堆栈元素在移动设备上的顶部和底部，在桌面上的侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53200476/