html - Bootstrap 3 缩略图右侧的文本

Question

我有一个问题，基本上使用缩略图是可以的，你可以在缩略图下面看到文字，但我想在缩略图旁边放 3 个标签，类似的东西，并且希望有:

或者那些在border之外的参数，但是border应该离缩略图很近...

代码如下:

<div class="col-xs-6 col-md-3">
  <a href="#" class="thumbnail">
    <img data-src="holder.js/100%x180" src="untitled.png" alt="Generic placeholder thumbnail">
    <ul>
    <li>Title</li>
    <li>Location</li>
    <li>Price</li>
    <ul>
  </a>
</div>

从帖子和回复中，我在 fiddle 以及我的解决方案中得到了以下内容，我将其标记为黄色，正如您所看到的，边框现在以某种方式位于顶部 :( :

这是最终屏幕，仍然损坏::(

Answer 1

问题是默认 Bootstrap 显示属性设置为 block 。只需将其更改为 inline-flex 或 inline-block 即可。例如:

<div id="someId" class="col-md-6">
    <a href="#" class="thumbnail">
        <div class="col-md-6">
            <img data-src="holder.js/100%x180" src="untitled.png" alt="Generic placeholder thumbnail">
        </div>
        <div class="col-md-6">
          <ul>
            <li>Title</li>
            <li>Location</li>
            <li>Price</li>
          </ul>
        </div>
    </a>
</div>

只需设置id并在css中写入

#someId .thumbnail{
    display: inline-flex;
}