通知布局 html 使用 Bootstrap

Question

我需要为自定义通知布局构建一个网格，但我不知道该怎么做。目前我正在使用 bootstrap css 来创建它。

结果应该如下（上面的数字是bootstrap中的列大小）：

我的代码如下：

<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        <img ...>
    </div>
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
        <div>Text 1</div>
        <div>Text 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
        <img ...>
        <img ...>
    </div>
</div>

我做错了什么？

谢谢！

Answer 1

您只是漏掉了最后一列，对吗？你还需要一个：

<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">

看这里：http://www.bootply.com/8rl3F6ETs6

我已经更改了第二列的布局方式以使其更加明确，但我相信如果您想要的是右侧的两列，则只需添加另一列即可。

如果您希望内容居中，则将 class .text-center 添加到每一列 div。

通知布局 html 使用 Bootstrap

Notification layout html using Bootstrap

html

css

grid-layout