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

Question

我正在使用 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 列来向您展示。请在此处检查输出。

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

Answer 1

尝试将 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>