如何：使用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

试试这样的事情-

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

Answer 2

快好了 ：）。 使用Bootstrap将具有很多样式属性的类添加到行或类并不安全。 拆分那些row caption元素：

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

新增负保证金（保证金：0;会更好，想着它），以.caption反击填充： 检查工作小提琴

Answer 3

我对您的代码进行了一些更改，但是我相信这是您想要的。 在摘要中按“整页”以查看结果。

 .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; } 

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