gpt4 book ai didi

css - 如何修复 bootstrap 4 中意外的列顺序?

转载 作者:行者123 更新时间:2023-11-28 11:01:39 32 4
gpt4 key购买 nike

我正在尝试制作如下布局:

desired layout

xs 设备上,我希望顺序是第一-第二-第三。

我的示例代码是:

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

发生的事情是第一列和第三列倒置并位于左侧。

最佳答案

Bootstrap 4 使用 flexbox,所以列总是等高的,你将无法在大屏幕上获得你想要的布局。解决方案是为 sm 及更高版本禁用 flexbox。使用 float ,使第三个较高的列向右浮动。 flexbox order- 将在移动设备 (xs) 上运行。

https://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-blocksm 上禁用 flexbox
  • float-left 禁用 flexbox 时 float 列,以便高列向右换行
  • order-* 在手机上获取想要的订单

相关:
Bootstrap with different order on mobile version
Empty vertical space between columns in Bootstrap 4

关于css - 如何修复 bootstrap 4 中意外的列顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49306652/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com