html - 如何: Using Bootstrapv3 to create thumbnail layout with caption where caption is contained within the image

Question

预期结果: https://imgur.com/P89k9Oy

进度:

https://jsfiddle.net/zigzag/2Lptu49k/5/

问题: 我可以看到透明区域的窄带，但无法完全覆盖字幕区域。是什么赋予了。感谢您的帮助!

代码:

<div class="container">
<div class="row">
    <div class="col-sm-4 tile">
        <div class="row">
            <div class="col-sm-12"  style="text-align:center">
                <span class="glyphicon glyphicon-headphones"></span>
            </div>
        </div>
        <div class="row caption">
            <div class="col-sm-6" style="text-align:center">
            One
            </div>
            <div class="col-sm-6" style="text-align:center">
            Two
            </div>
        </div>
    </div>

    <div class="col-sm-4 tile">
        <div class="row">
            <div class="col-sm-12"  style="text-align:center">
                <span class="glyphicon glyphicon-headphones"></span>
            </div>
        </div>
        <div class="row caption">
            <div class="col-sm-6" style="text-align:center">
            One
            </div>
            <div class="col-sm-6" style="text-align:center">
            Two
            </div>
        </div>
    </div>

    <div class="col-sm-4 tile">
        <div class="row">
            <div class="col-sm-12"  style="text-align:center">
                <span class="glyphicon glyphicon-headphones"></span>
            </div>
        </div>
        <div class="row caption">
            <div class="col-sm-6" style="text-align:center">
            One
            </div>
            <div class="col-sm-6" style="text-align:center">
            Two
            </div>
        </div>
    </div>
</div>

<div class="row">

<div class="col-sm-4 tile">
        <div class="row">
            <div class="col-sm-12"  style="text-align:center">
                <span class="glyphicon glyphicon-headphones"></span>
            </div>
        </div>
        <div class="row caption">
            <div class="col-sm-6" style="text-align:center">
            One
            </div>
            <div class="col-sm-6" style="text-align:center">
            Two
            </div>
        </div>
    </div>

<div class="col-sm-4 tile">
        <div class="row">
            <div class="col-sm-12"  style="text-align:center">
                <span class="glyphicon glyphicon-headphones"></span>
            </div>
        </div>
        <div class="row caption">
            <div class="col-sm-6" style="text-align:center">
            One
            </div>
            <div class="col-sm-6" style="text-align:center">
            Two
            </div>
        </div>
    </div>

<div class="col-sm-4 tile">
        <div class="row">
            <div class="col-sm-12"  style="text-align:center">
                <span class="glyphicon glyphicon-headphones"></span>
            </div>
        </div>
        <div class="row caption">
            <div class="col-sm-6" style="text-align:center">
            One
            </div>
            <div class="col-sm-6" style="text-align:center">
            Two
            </div>
        </div>
    </div>
</div>

真正忽略第一行之后的代码细节。一旦我弄对了一 block 瓷砖，我希望它们都能正常工作。

我希望我真的可以使用一些简单的方法来解决这个问题。我查找了类似的问题并试图将它们放在一起，但我认为这有点不足。

Answer 1

尝试这样的事情-

.head {
  height: 70px;
  background: #CCC;
}
.tail {
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="clearfix">
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
    <div class="clearfix thumbnail">
      <div class="col-md-12">
        <div class="row head">
          <div class="col-md-12">
            IMAGE
          </div>
        </div>
        <div class="row tail">
          <div class="col-xs-6">
            Title
          </div>
          <div class="col-xs-6">
            Desc
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
    <div class="clearfix thumbnail">
      <div class="col-md-12">
        <div class="row head">
          <div class="col-md-12">
            IMAGE
          </div>
        </div>
        <div class="row tail">
          <div class="col-xs-6">
            Title
          </div>
          <div class="col-xs-6">
            desc
          </div>
        </div>
      </div>
    </div>
  </div>
</div>