首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在使用bootstrap调整大小时在同一行上保留多个图像?

如何在使用bootstrap调整大小时在同一行上保留多个图像?
EN

Stack Overflow用户
提问于 2013-11-15 23:50:42
回答 1查看 551关注 0票数 0

我刚接触bootstrap。我得到了这个代码

代码语言:javascript
复制
<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做到这一点呢?

EN

回答 1

Stack Overflow用户

发布于 2013-11-16 00:00:56

这是因为每个图像包装器div的显示是“block”的,当你设置为inline时,它会得到你想要的方式。看一下:(使用不同的代码- http://bootply.com/94383 )(使用相同的代码- http://bootply.com/94385)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20005030

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档