Question

我正在尝试制作一个带有文字的简单缩略图库。我希望将图像放在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]

Answer 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

简单的Bootstrap 3缩略图库

1 个答案: