Question

我已经在很长一段时间内遇到了布局问题，而我却找不到解决方案。

我想要实现的是方形瓷砖布局。根据我在Stackoverflow上发现的信息，我已经成功了，但我无法解决最后一块。

HTML：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">column big</div>
    <div class="col-md-3">column 1</div>
    <div class="col-md-3">column 2</div>    
    <div class="col-md-3">column 3</div>
    <div class="col-md-3">column 4</div>
    <div class="col-md-3">column 5</div>
    <div class="col-md-3">column 6</div>
    <div class="col-md-6">column big</div>
    <div class="col-md-3">column 7</div>
  </div>
</div>

CSS（最小高度仅用于测试）：

.col-md-6, .col-md-3 {
    min-height: 200px;
    background-color: blue;
    border: 1px solid black;
    height: 0;
    padding-bottom: 50%;
}
.col-md-3 {
    padding-bottom: 25%;
}

最后一列（nr 7）未放置在第5列下，而是放在新行中。我理解它背后的逻辑，但这不是我想要的。尝试用Bootstrap解决，没有Bootstrap，带有列表，但不起作用。还尝试了几种砌体选项，但这也没有用（虽然这可能是因为缺乏js知识）。

我希望布局能够响应。除了提到的问题之外，还可以管理它。

所以我的问题是：有没有办法将'第7列'放在我想要的位置（第5列下方）？可以用HTML / CSS完成吗？或者我需要javascript吗？

提前致谢！

Answer 1

你有正确的想法，但你应该遵循以下几点：

来自bootstrap documentation：

通过指定您希望跨越的十二个可用列的数量来创建网格列

这意味着单行中的列理想情况下最多可以添加12个。您可以拥有更多，但文档还指出超过12个限制范围的额外列将被推送到新行，这就是您和＃39;重新看到。

要解决您遇到的问题，您需要确保单行中的列最多只能为12.要获得所需的结果，您必须在列中嵌套行。

请参阅此example了解我是如何做到这一点的（您可能需要将HTML部分扩大以查看所需结果）

HTML：

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 large">
                1
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-6 small">2</div>
                    <div class="col-md-6 small">3</div>
                </div>
                <div class="row">
                    <div class="col-md-6 small">4</div>
                    <div class="col-md-6 small">5</div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-6 small">6</div>
                    <div class="col-md-6 small">7</div>
                </div>
                <div class="row">
                    <div class="col-md-6 small">8</div>
                    <div class="col-md-6 small">9</div>
                </div>
            </div>
            <div class="col-md-6 large">
                10
            </div>
        </div>
    </div>
</body>

CSS：

.col-md-6 {
    background-color: blue;
    color: #fff;
}

.large {
    height: 200px;
    border: 1px solid black;
}

.small {
    height: 100px;
    border: 1px solid black;
}

Answer 2

您需要在html页面中遵循特定模式才能应用bootstrap。

css：

<style>
    div.big, div.small {
        font-size: -webkit-xxx-large;
    }
    .big {
        padding-bottom: 50%;
        background: #C9A;
    }
    .small {
        padding-bottom: 25%;
        background: #DB2;
    }
</style>

html：

<div class="container-fluid">
        <div class="row">
            <div class="col-md-6 big">column big</div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-6 small">column 1</div>
                    <div class="col-md-6 small">column 2</div>
                    <div class="col-md-6 small">column 3</div>
                    <div class="col-md-6 small">column 4</div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-6 small">column 5</div>
                    <div class="col-md-6 small">column 6</div>
                    <div class="col-md-6 small">column 7</div>
                </div>
            </div>
            <div class="col-md-6 big">column big</div>
        </div>
    </div>

方形瓷砖布局中的差距

2 个答案: