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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 00:38:28  来源:igfitidea点击:

How to display two images on one line Bootstrap 3

htmlcssimagetwitter-bootstraptwitter-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>