如何在bootstrap中创建自定义布局？

Question

我需要根据随机组合创建多个自定义布局。所以根据bootstrap的12列概念，我有点困惑它是否有效。所以我需要一些实用的想法来实现这一目标。例如，请看下面的示例。

或

或

布局将是动态的。从服务器我将获得每个块的起始坐标，高度和宽度。如果需要任何进一步的输入，请告诉我。

Answer 1

是的，您可以使用Bootstrap创建几乎任何自定义布局。这是通过其他行和列中的nesting rows and columns来完成的。

以下是如何为上述示例创建布局：

<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="row">
                <div class="col"></div>
            </div>
            <div class="row">
                <div class="col"></div>
            </div>
            <div class="row">
                <div class="col"></div>
            </div>
        </div>
        <div class="col"></div>
    </div>
    <div class="row">
        <div class="col-3"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

注意：

col是默认的，即无响应的类。换句话说，它是最小屏幕尺寸的类，这意味着在不添加任何其他响应类的情况下，所有屏幕尺寸的布局看起来都相同。要使其响应，您需要添加所需的响应类。