【问题标题】:Simple Bootstrap 3 Thumbnail Gallery简单的 Bootstrap 3 缩略图库
【发布时间】:2013-11-18 22:56:44
【问题描述】:

我正在尝试制作一个带有文本的简单缩略图库。我希望将图像放在 6 列中,将文本放在另外 6 列中,以便图像位于文本的左侧但在同一行中。我想不通。

我的问题是图像被列在彼此下方,而不是像普通画廊一样放置。出了什么问题?

这是我的代码

<div class="section">
    <div class="row">
      <div class="col-md-6">
        <a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a>
        <a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a>
        <a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a>
        <a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a>
        <a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a>
        <a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a>
      </div>

    <article class="col-md-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ducimus harum distinctio nostrum similique nulla amet architecto expedita molestiae illum explicabo veritatis labore veniam a tempore consectetur error quod facilis.ipsum dolor sit amet, consectetur adipisicing elit. Ab, ducimus harum distinctio nostrum similique nulla amet architecto expedita molestiae illum explicabo veritatis labore veniam a tempore consectetur error quod facilis.ipsum dolor sit amet, consectetur adipisicing elit. Ab, ducimus harum distinctio nostrum similique nulla amet architecto expedita molestiae illum explicabo veritatis labore veniam a tempore consectetur error quod facilis.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ducimus harum distinctio nostrum similique nulla amet architecto expedita molestiae illum explicabo veritatis labore veniam a tempore consectetur error quod facilis.ipsum dolor sit amet, consectetur adipisicing elit. Ab, ducimus harum distinctio nostrum similique nulla amet architecto expedita molestiae illum explicabo veritatis labore veniam a tempore consectetur error quod facilis.ipsum dolor sit amet, consectetur adipisicing elit. Ab, ducimus harum distinctio nostrum similique nulla amet architecto expedita molestiae illum explicabo veritatis labore veniam a tempore consectetur error quod facilis.</p>


    </article>

  </div>
</div>![bootstrap gallery][1]

【问题讨论】:

    标签: twitter-bootstrap gallery twitter-bootstrap-3


    【解决方案1】:

    我想你想要这样的东西来保持图像在同一行..

    <div class="row">
          <div class="col-md-1"><a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a></div>
          <div class="col-md-1"><a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a></div>
          <div class="col-md-1"><a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a></div>
          <div class="col-md-1"><a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a></div>
          <div class="col-md-1"><a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a></div>
          <div class="col-md-1"><a href="#" class="thumbnail"><img src="http://placehold.it/150x150" alt=""></a></div>
          <article class="col-md-6">
          ..
          </article>
        </div>
    

    http://bootply.com/94880

    【讨论】:

    • 这是一个正确的答案,但有点奇怪,因为 'thumbnail' 类除了添加边框之外什么都不做……'thumbnail' 的整个概念似乎是多余的。
    猜你喜欢
    • 2014-08-30
    • 1970-01-01
    • 1970-01-01
    • 2011-10-04
    • 2020-12-03
    • 2017-10-30
    • 2015-05-20
    • 1970-01-01
    • 2012-11-18
    相关资源
    最近更新 更多