个人中心
gpt4 book ai didi

html - Bootstrap Grid - 删除垂直空白空间

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

<分区>

我当前的布局如下所示:

<div class="container">
    <div class="row">
        <div class="col-md-8">1. Lorem</div>
        <div class="col-md-4">2. Sollicitudin</div>
        <div class="col-md-8">3. Lorem ipsum</div>
        <div class="col-md-4">4. Pellentesque</div>
        <div class="col-md-8">5. Donec efficitur</div>
        <div class="col-md-4">6. Donec efficitur</div>
        <div class="col-md-8">7. Lorem ipsum dolor</div>
    </div>
</div>

在桌面模式下，我希望列像这样堆叠:

col-md-8    col-md-4
col-md-8    col-md-4
col-md-8    col-md-4
col-md-8    col-md-4

在手机/​​平板电脑中，我希望列像这样堆叠:(从 col-md-8 开始)

col-md-8
col-md-4
col-md-8
col-md-4
col-md-8
col-md-4
col-md-8
col-md-4

我遇到了一个大问题，同一类的列没有垂直堆叠。相反，他们遗漏了一个很大的“空白空间”。 See fiddle of the empty space here .

我用下面的 CSS 解决了这个问题:

@media (min-width: 992px) {
    .col-md-4 {
        float: right;
    }
}

See fiddle updated with new css - 这些列现在完全按照我的意愿堆叠!

但是，如果 col-md-8 比相应的 col-md-4 长，我会遇到和以前一样的问题，参见 fiddle with same css as before, but with vertical empty space .

期望的输出:

我希望具有相同类的列垂直堆叠而不考虑高度。这些列还必须根据其内部的“内容”量动态调整其高度，因为这是无法预测的。我不能有固定高度的列。

所需输出的 ​​Photoshop 图像。

bootstrap dynamic and vertical stacked

我试图改变列的顺序，所以 col-md-4 排在第一位，这修复了它 - 参见 fiddle with updated column order .但在手机/平板电脑中，它们以错误的顺序堆叠(从 col-md-4 开始)，如果 col-md-4 更长，它就会把事情搞砸，就像, see fiddle of this .

谁知道如何解决这个问题？

25 4 0
文章推荐： javascript - 从 FancySelect mootools 中获取值(value)
文章推荐： javascript - 查找单词中的特定字母
文章推荐： jquery - 使用 JQuery Datepicker(具有重复 ID 的元素)
文章推荐： html - 如何从包含的jsp更改jsp基页中body标签的类
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com