如何：使用Bootstrapv3创建带有标题的缩略图布局，其中标题包含在图像中

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>

真正忽略第一行后的代码详细信息。一旦我得到一个瓷砖，我希望所有这些都能正常工作。

我希望我能用一些简单的东西来解决这个问题。我查了一些类似的问题并尝试将它们放在一起，但我认为这有点短暂。

Answer 1

尝试这样的事情 -

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

几乎在那里:)。使用Bootstrap将具有大量样式属性的类添加到行或列中是不安全的。将这些<div class="caption"> <div class="row"> <div class="col-sm-6" style="text-align:center"> One </div> <div class="col-sm-6" style="text-align:center"> Two </div> </div> </div> 元素拆分：

.caption

添加负余量（保证金：0;会更好，考虑一下）到{{1}}以对抗填充：Check working Fiddle

Answer 3

我改变了你的代码，但我相信你正在寻找的东西。按＆＃34;整页＆＃34;在一个片段中看到结果。

＆＃13;

＆＃13;

.row {
    padding-bottom: 10px;
    padding-top: 10px;
}

.tile {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("http://www.sepeb.com/random-image/random-image-001.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.caption {
    background: linear-gradient(to top, #000 40%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: white;
}

.caption:after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    top: 0;
    left: 0;
    background: rgba(152, 54, 55, 0.8);
}

.extend {
    padding-left: 0;
}

.extend:nth-of-type(3) {
    padding-right: 0;
}

.tile > .row {
    margin-left: 0;
    margin-right: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <div class="container">
        <div class="row">
            <div class="col-sm-4 extend">
                <div class="tile">
                    <div class="row">
                        <div class="col-sm-12" style="text-align:center">
                            <span class="glyphicon glyphicon-headphones"></span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="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>

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

                    <div class="row">
                        <div class="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>

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

                    <div class="row">
                        <div class="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>
        </div>

        <div class="row">

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

                    <div class="row">
                        <div class="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>

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

                    <div class="row">
                        <div class="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>

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

                    <div class="row">
                        <div class="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>

        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;