Question

你好，我是新手，我想知道如何在一行显示两个图像并保持响应功能。你能举个例子吗？

 <div class="col-xs-12 col-md-8">
<img src="images/l.jpg" class="img-responsive" alt="Logo">
 </div>

Answer 1

当然，对于BS2：

<div class="row-fluid">
    <div class="span6"><img src="yourimage"/></div>
    <div class="span6"><img src="yourimage"/></div>
</div>

对于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>

编辑：01/03/2017 对于BS4（w / FLEXBOX）：

<div class="row">
    <div class="col"><img src="yourimage"/></div>
    <div class="col"><img src="yourimage"/></div>
</div>

另一种解决方案是将图像浮动到左侧：

<img class="pull-left" src="yourimage"/>
<img class="pull-left" src="yourimage"/>

Answer 2

它应该是那样的

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

如何在一行Bootstrap 3上显示两个图像

2 个答案: