如何使用bootstrap并排保存图像

时间:2014-02-14 06:13:13

标签: javascript jquery html css twitter-bootstrap

我的目标是在大屏幕上并排放置2张图片,在小屏幕上放置一张。我所做的就是反过来。在大屏幕上,图像是一个在另一个上面,在小屏幕上图像是和睦相处。

请参阅此fiddle

这是我的HTML代码

<!--nav bar-->
<div class="container">
<div class="row">
<div class="col-md-18">
<div >
    <img src="http://www.computerhope.com/logo.gif" alt="Logo"  class="round"> my user
</div>
</div>
<div class="col-md-6">Recently purchased
<div id="slideshow">
  <span class="images">
<div class="box img-responsive">
    <img src="http://lorempixel.com/150/100/abstract" />
<span class="caption simple-caption">
                    <p>Review</p>
                </span>
</div>
<div class="box img-responsive">
    <img src="http://lorempixel.com/150/100/food" />
<span class="caption simple-caption">
                    <p>Review</p>
                </span></div>
  </span>

  <a class="next" href="#">Next</a>
</div>
</div>
</div>
</div>

我没有发布js代码,因为我认为没有必要但如果你想要那么请检查小提琴

请参阅屏幕截图enter image description here

1 个答案:

答案 0 :(得分:1)

img-responsive类添加到图片标记而不是div标记。另外col-lg-18除非你自定义了,否则不可能有18列,默认情况下12是你可以拥有的最大列。