gpt4 book ai didi

css - 使用 Bootstrap "row"和 "col-lg-3"类时,所有列都获得最长列的高度。如何解决这个问题?

转载 作者:太空宇宙 更新时间:2023-11-03 22:32:10 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 开发一个简单的布局。它使用“行”和“col-lg-3”类将一些数据加载到列中。 “行”类下的 View 中有 4 列。在“col-lg-3”类中,我添加了另一个“行”类并将其分为“col-lg-6”的两列。请在此处检查代码。那么就很容易理解了。

<div class="row">
<div class="col-lg-3"
style="background-color: #cecece;border-right: 5px solid #cecece;border-left: 5px solid #cecece; border-radius: 10px;margin-right: 5px;">
<div class="row">
<div class="col-lg-6">
<img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="../static/images/gohugo-default-sample-hero-image.jpg"
class="img"
alt="image">
</div>
<div class="col-lg-6">
<img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
class="img"
alt="image">
</div>
<div class="col-lg-6">
<img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
class="img"
alt="image">
</div>
<div class="col-lg-6">
<img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
class="img"
alt="image">
</div>
<div class="col-lg-6">
<img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
class="img"
alt="image">
</div>
</div>
</div>
<div class="col-lg-3"
style="background-color: #cecece;border-right: 5px solid #cecece;border-left: 5px solid #cecece; border-radius: 10px;margin-right: 5px;">
<div class="row">
<div class="col-lg-6">
<img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="../static/images/gohugo-default-sample-hero-image.jpg"
class="img"
alt="image">
</div>
</div>
</div>
</div>

这是我原始代码中的一个示例片段。我只添加了 2 列来向您展示。请在此处检查输出。

enter image description here

你可以看到输出。第一列有 5 个元素,它分 3 行加载。第二列有一个元素。但问题是背景颜色。在第二列中,我只需要为元素行添加“灰色”颜色。不到那里的其他 2 行。它有底部的空白空间。如何减少呢?每次所有列都取最长列的高度。我需要使这些列独立。请帮我解决这个问题。谢谢。

最佳答案

尝试将 background-color: #cecece 添加到 .col-lg-6

.col-lg-6 {
background-color: #cecece;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="col-lg-12" style="border-radius: 10px;overflow: hidden;margin-right: 5px;">
<div class="row">
<div class="col-lg-6">
<img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="../static/images/gohugo-default-sample-hero-image.jpg"
class="img"
alt="image">
</div>
<div class="col-lg-6">
<img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
class="img"
alt="image">
</div>
<div class="col-lg-6">
<img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
class="img"
alt="image">
</div>
<div class="col-lg-6">
<img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
class="img"
alt="image">
</div>
<div class="col-lg-6">
<img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="static/images/coding/netifly.png"
class="img"
alt="image">
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="col-lg-12" style="background-color: #cecece;border-right: 5px solid #cecece;border-left: 5px solid #cecece; border-radius: 10px;margin-right: 5px;">
<div class="row">
<div class="col-lg-6">
<img style="max-width: 80%;max-height: 100px;margin-top:10px;" src="../static/images/gohugo-default-sample-hero-image.jpg"
class="img"
alt="image">
</div>
</div>
</div>
</div>
</div>
</div>

关于css - 使用 Bootstrap "row"和 "col-lg-3"类时,所有列都获得最长列的高度。如何解决这个问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48070893/

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