css 引导列高度问题,如何为引导网格列设置自动高度?

djmepvbi  于 2023-01-27  发布在  其他
关注(0)|答案(1)|浏览(183)

我正在建立一个网站,但我有一个问题,我需要解决您可以使用以下照片作为参考我们得到这个

我们想要这个。

谢谢
当我们尝试自动设置高度时,我们会得到不同的结果。

<div class="row">
    <div class="col-lg-3">
        Content
        Content
        Content
        Content
    </div>
    <div class="col-lg-3">
        Content
        Content
    </div>
    <div class="col-lg-3">
        Content
        Content
        Content
    </div>
    <div class="col-lg-3">
        Content
    </div>
    <div class="col-lg-3">
        Content
        Content
        Content
        Content
        Content
    </div>
    <div class="col-lg-3">
        Content
    </div>
    <div class="col-lg-3">
        Content
        Content
        Content
    </div>
</div>
lmyy7pcs

lmyy7pcs1#

我不能告诉你没有看到你的来源,所以我建议你编辑,如果可能的话。
在代码块的前后加上三个反号可以很好地突出显示语法!
不过,对于真正的问题,根据我过去看到的类似问题,我对发生了什么事有一个最好的猜测:

<div class="container">
    <div class="row">
        <div class="col-6">
            <div style="height: 250px" class="card m-2 bg-primary"></div>
        </div>
        <div class="col-6">
            <div style="height: 100px" class="card m-2 bg-primary"></div>
        </div>
        <div class="col-6">
            <div style="height: 60px" class="card m-2 bg-primary"></div>
        </div>
        <div class="col-6">
            <div style="height: 200px" class="card m-2 bg-primary"></div>
        </div>
    </div>
</div>

正如您所知,Bootstrap使用“12列”系统进行布局。
每行包含12个相等的“列单元”,可以在子列之间分配。
在上面的例子中,我将每列设置为6个“列单位”宽(col-6),这意味着它们将是父容器宽度的一半。
这对前两个很好,但第三个不合适,需要溢出。
当一行溢出时,在某些方面,它的作用就像您创建了第二行来容纳溢出:

<div class="container">
    <div class="row">
        <div class="col-6">
            <div style="height: 250px" class="card m-2 bg-primary"></div>
        </div>
        <div class="col-6">
            <div style="height: 100px" class="card m-2 bg-primary"></div>
        </div>
        <!-- First row "ends" -->
        <!-- Second row "begins" -->
        <div class="col-6">
            <div style="height: 60px" class="card m-2 bg-primary"></div>
        </div>
        <div class="col-6">
            <div style="height: 200px" class="card m-2 bg-primary"></div>
        </div>
    </div>
</div>

要解决这个问题,您只需要为每个列显示一个column元素,其中包含该列的所有子元素:

<div class="container">
    <div class="row">
        <div class="col-6">
            <!-- All elements in the first column should be placed here -->
            <div style="height: 250px" class="card m-2 bg-primary"></div>
            <div style="height: 100px" class="card m-2 bg-primary"></div>
        </div>
        <div class="col-6">
            <!-- All elements in the second column should be placed here -->
            <div style="height: 60px" class="card m-2 bg-primary"></div>
            <div style="height: 200px" class="card m-2 bg-primary"></div>
        </div>
    </div>
</div>

上面的示例只有两列,但我将一个使用四列的简单示例放在一起,您可以找到here.
要进一步阅读Bootstrap 4网格系统,可以查看其文档here.

相关问题