Question

如何使用bootstrap执行此图像？

这是我的代码，这段代码中的错误请帮助我。

h1

结果就是这个，

这是我的代码结果。

Answer 1

您可以根据需要使用嵌套行来创建结构。这是一个示例代码，可以引导您进行所需的设计。

<div class="row">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">2</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">4</div>
            </div>

        </div>
    </div>
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">2</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">4</div>
            </div>

        </div>
    </div>
</div>

<强> JSFIDDLE

Answer 2

Bootstrap有一个12列网格系统。所以你应该划分你的网格，使网格的总和达到12。

错误：您正在使用5 div col-md-4，每个网格有4个网格。这意味着您的网格总和为20.但是，它应该是12.在某些情况下，大于12的网格总和可能正常工作（使用col-sm-*）。但强烈建议使用12网格系统。

所以你应该做的是：

而不是使用5 col-md-4，您应该只使用3 col-md-4（网格总数= 12）。
您应该在第一个div（左侧div）中放置2个图像，在第二个div（中央div）中放置1个图像，其余2个图像放在第三个div（右侧div）中。

这应该可以解决问题。这是JSFiddle demo。（由于md代表中型设备，我们与列div元素通信的是当可用屏幕空间等于或大于“中型设备”（992px及以上）时，修改这些元素的宽度匹配md类名中的列号。确保JSFiddle中的输出窗口具有最大宽度以查看结果，否则所有图像将堆叠在另一个之下）

希望它有所帮助，请告诉我你是否有问题。

Answer 3

你应该删除，因为在ROW下你应该只使用像col-sm- *或col-md- *这样的类来使用你想要在网格中的内容如果你想在网格中的当前div之前有空格，你也可以使用像.col-md-offset- *这样的类。

Answer 4

Bootstrap将屏幕划分为12列，你sholud只有3列md-4 y一行。并在第一列放置2张图片，在中间列放置大图像，在最后一列放置两张剩余图像。

Answer 5

查看此图像以获得有关网格的基本知识。使用网格布局根据需要分发页面。

如何使用bootstrap这样的图像？

5 个答案: