Html 如何在一行 Bootstrap 3 上显示两个图像
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21282618/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display two images on one line Bootstrap 3
提问by Александър А.
Hello i m new to bootstrap and i want to know how to display two images on one line and keep the responsive function.Can you give me an example ?
你好,我是引导程序的新手,我想知道如何在一行上显示两个图像并保持响应功能。你能给我举个例子吗?
<div class="col-xs-12 col-md-8">
<img src="images/l.jpg" class="img-responsive" alt="Logo">
</div>
回答by Ignacio Correia
Sure, for BS2:
当然,对于 BS2:
<div class="row-fluid">
<div class="span6"><img src="yourimage"/></div>
<div class="span6"><img src="yourimage"/></div>
</div>
For BS3:
对于 BS3:
<div class="row">
<div class="col-xs-6 col-md-6"><img src="yourimage"/></div>
<div class="col-xs-6 col-md-6"><img src="yourimage"/></div>
</div>
EDIT: 01/03/2017For BS4 (w/ FLEXBOX):
编辑:01/03/2017对于 BS4(带 FLEXBOX):
<div class="row">
<div class="col"><img src="yourimage"/></div>
<div class="col"><img src="yourimage"/></div>
</div>
Another solution is to float the images to the left:
另一种解决方案是将图像浮动到左侧:
<img class="pull-left" src="yourimage"/>
<img class="pull-left" src="yourimage"/>
回答by semirturgay
It should be something like that
应该是这样的
<div class="col-xs-12 col-md-8">
<div class="row">
<div class="col-xs-4 col-md-4">
<img src="images/l.jpg" class="img-responsive" alt="Logo">
</div>
<div class="col-xs-4 col-md-4">
<img src="images/2.jpg" class="img-responsive" alt="Logo">
</div>
<div class="col-xs-4 col-md-4">
<img src="images/2.jpg" class="img-responsive" alt="Logo">
</div>
</div>
</div>