gpt4 book ai didi

css - 使用 col-*-pull 或 col-*-push 时如何 float div 元素?

转载 作者:太空宇宙 更新时间:2023-11-04 09:21:55 27 4
gpt4 key购买 nike

我有一个包含三个 div 的示例页面,如下所示:

<body class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-md-push-6 col-lg-push-0"></div>
<div class="col-lg-4 col-md-6 col-md-pull-6 col-lg-pull-0"></div>
<div class="col-lg-4 col-md-6 col-md-push-6 col-lg-push-0"></div>
</div>
</body>

当浏览器大小达到 md 点并且第二个 div 高于第一个 div 时,第三个 div 开始在第一个的右侧。我应该如何更改网格实现来修复它?我有 codepen.io 上的代码

最佳答案

语法错误:

不需要 col-lg-4.col-md-6 替换成 col-lg-4 col-md-6

 <body class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-md-push-6 col-lg-push-0"></div>
<div class="col-lg-4 col-md-6 col-md-pull-6 col-lg-pull-0"></div>
<div class="col-lg-4 col-md-6 col-md-push-6 col-lg-push-0"></div>
</div>
</body>

另外,如果您将最后一个 col-md-push-6 和 col-lg-push-0 替换为 col-md-offset-6 和 col-lg-offset-0。它应该按照您想要的方式运行。

这里 fork 了codepen

发生这种情况是因为 offset 的工作方式与 Bootstrap 中的 push 不同。 Here is reason

关于css - 使用 col-*-pull 或 col-*-push 时如何 float div 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41432072/

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