如何在引导程序4中修复意外的列顺序? [英] How to fix unexpected column order in bootstrap 4?
问题描述
我正在尝试进行如下布局:
I'm trying to make a layout like the following:
在xs设备上，我希望顺序为前三分之二.
On xs devices, I'd like the order to be first-second-third.
我的示例代码是:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
div.short { height: 100px; background-color: rgb(174, 199, 232); }
div.medium { height: 200px; background-color: rgb(255, 187, 120); }
div.tall { height: 400px; background-color: rgb(152, 223, 138); }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 short order-sm-9">
First column (short)
</div>
<div class="col-sm-8 medium order-sm-1">
Second column (medium)
</div>
<div class="col-sm-4 tall">
<p>Third column (tall)</p>
<p>
How to keep this <em>under</em> the first (blue) column
when on <code>sm</code> or larger devices, while
preserving the first-second-thrid order on <code>xs</code>
devices?
</p>
<p>
And why are these narrower columns on the left, rather
than right?
</p>
</div>
</div>
</body>
</html>
正在发生的事情是，第一列和第三列上下颠倒并位于左侧.
What is happening is that the first and third columns end up upside down and on the left.
推荐答案
Bootstrap 4使用flexbox ，因此列的高度总是相等的，您将无法获得您想要在大屏幕上显示的版面.解决方法是禁用sm及更高版本的flexbox.使用浮点数，使第3个较高的列浮到右侧. flexbox order-将在移动设备(xs)上运行.
Bootstrap 4 uses flexbox, so the columns are always going to be equal height, and you'll not be able to get the layout that you want on larger screens. The solution is to disable the flexbox for sm and up. Use floats so that the 3rd taller column floats to the right. The flexbox order- will work on mobile (xs).
https://www.codeply.com/go/c31HUTtXra
<div class="container">
<div class="row d-sm-block">
<div class="float-left col-sm-8 medium order-2">
Second column (medium)
</div>
<div class="float-left col-sm-4 short order-1">
First column (short)
</div>
<div class="float-left col-sm-4 tall order-3">
<p>Third column (tall)</p>
..
</div>
</div>
</div>
-
d-sm-block禁用smup 上的flexbox
-
float-left用于在禁用flexbox时浮动列，以使较高的列环绕在右侧 -
order-*以便在移动设备上获得所需的订单 d-sm-blockdisables flexbox onsman upfloat-leftto float the columns when flexbox is disabled so that the tall columns wraps to the rightorder-*to get the desired order on mobile
相关:
在移动版本上具有不同顺序的引导程序
在Bootstrap 4的列之间空的垂直空间
Related:
Bootstrap with different order on mobile version
Empty vertical space between columns in Bootstrap 4
这篇关于如何在引导程序4中修复意外的列顺序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
