html - 使用 bootstrap 调整大小时如何在同一行上保留多于 1 个图像？

Question

我是 bootstrap 的新手。我得到了这个代码

<div class="row-fluid inline">
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img823/3578/lnrk.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img593/2931/5mzt.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img841/6476/bk2j.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img823/3578/lnrk.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img593/2931/5mzt.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img841/6476/bk2j.jpg" alt="Responsive image"/></div>
</div>
<br />
<div class="row-fluid inline">
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img823/3578/lnrk.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img593/2931/5mzt.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img841/6476/bk2j.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img823/3578/lnrk.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img593/2931/5mzt.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img841/6476/bk2j.jpg" alt="Responsive image"/></div>
</div>

它显示 2 行 6 列/图像。当我将其调整到某个点时，它会显示多行 1 张图像。相反，我想要 4 行 3 个图像/列。有没有一种简单的方法可以使用 Bootstrap 来做到这一点？

Answer 1

那是因为每个图像包装器 div 的显示都是“ block ”，当您设置为内联时，它会按照您想要的方式显示。看一看: (使用不同的代码进入您想要的大小 - http://bootply.com/94383 )(使用相同的代码 - http://bootply.com/94385 )