如何：使用Bootstrapv3创建带有标题的缩略图布局，其中标题包含在图像中(How to: Using Bootstrapv3 to create thumbnail layout with caption where caption is contained within the image)
预期结果： 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>在第一行之后真的忽略代码细节。 一旦我得到一个瓷砖，我希望所有这些都能正常工作。
我希望我能真正用一些简单的东西来解决这个问题。 我查了类似的问题，试图把它放在一起，但我认为这有点短。
expected result: https://imgur.com/P89k9Oy
progress:
https://jsfiddle.net/zigzag/2Lptu49k/5/Issue: I can kind of see the narrow band of transparent area but I'm not able to fully cover the caption area. what gives. Appreciate your help!
Code:
<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>Ignore the code details after the first row really. Once I get one tile right, I expect all of them to work.
I'm hoping that i can really use something simple to address this. I looked up similar questions and tried to put it all together but I think this falls a little short.
最满意答案
差不多了 ：）。 使用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来对抗填充： 检查工作小提琴
Almost there :). Using Bootstrap it is not that safe to add classes with a lot of style properties to a row or col- class. Split those row caption elements up:
<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>Added negative margin (margin:0; would be better, thinking about it) to .caption to counter the padding: Check working Fiddle
更多推荐
class,div>,问题,电脑培训,计算机培训,IT培训"/> <meta name="description&
发布评论