Bootstrap对齐标题相对于图像宽度而不是容器

Question

I'm trying to list some images, and for each image I want to have a caption, with some details, let's say the title, the problem right now is that the width of the caption is relative to the parent div which is normal, but I want it to be relative to the image width, but since I have the class img-responsive on the img I don't know how to achive this. 我正在尝试列出一些图像，对于每个图像我想要一个标题，有一些细节，让我们说标题，现在的问题是标题的宽度是相对于父div，这是正常的，但我希望它相对于图像宽度，但因为我有img-responsive的类，我不知道如何实现这一点。 Maybe you guys can help me out. 也许你们可以帮助我。

Here is a live example: http://jsbin.com/cudugize/1/edit?html,css,output 这是一个实例： http ： //jsbin.com/cudugize/1/edit？html，css，output

Here is the code 这是代码

HTML HTML

  <div class="col-sm-3 col-xs-6 col-md-2 col-lg-3">
  <div class="thumbnail">
  <a href="url"><img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="..."></a>
  <div class="caption img-responsive">
  <h4 class="text-center"><a href="url" title="title" class="homepage anchorhead text-uppercase">Nice title</a></h4>
  <p class="text-center"><a href="#" class="homepage city text-uppercase"><span class="glyphicon glyphicon-globe"></span> usa</a></p>
  </div>
  </div>

  <div class="thumbnail">
  <a href="url"><img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="..."></a>
  <div class="caption img-responsive">
  <h4 class="text-center"><a href="url" title="title" class="homepage anchorhead text-uppercase">Nice title</a></h4>
  <p class="text-center"><a href="#" class="homepage city text-uppercase"><span class="glyphicon glyphicon-globe"></span> usa</a></p>
  </div>
  </div>

  </div>

CSS CSS

Aditional bootstrap core css

.thumbnail{
position: relative;
width: 100%;
border: none !important;
}
.thumbnail .caption{
  position: absolute;
bottom: 0px;
background: rgba(0,0,0,0.50);
width: 100%;
padding: 0px !important;
}

Answer 1

http://jsbin.com/cudugize/7 http://jsbin.com/cudugize/7

please see my demo code, it archived your demand. 请查看我的演示代码，它存档了您的需求。

<!DOCTYPE html>
<html>

<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
    .tc {
        text-align:center;
    }
    .thumbnail {
        position: relative;
        display:inline-block;
        *display:inline;
        *zoom:1;
        border: none;
        margin:0 auto;
        padding:0;
    }
    .thumbnail .caption {
        position: absolute;
        bottom: 0px;
        background: rgba(0, 0, 0, 0.50);
        width: 100%;
        padding: 0px !important;
    }
    </style>
</head>

<body>
    <div class="col-sm-3 col-xs-6 col-md-2 col-lg-3">

        <div class="tc">
            <div class="thumbnail">
                <a href="url">
                    <img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="...">
                </a>
                <div class="caption img-responsive">
                    <h4 class="text-center"><a href="url" title="title" class="homepage anchorhead text-uppercase">Nice title</a>
                    </h4>
                    <p class="text-center">
                        <a href="#" class="homepage city text-uppercase">
                            <span class="glyphicon glyphicon-globe"></span>usa</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="tc">
            <div class="thumbnail">
                <a href="url">
                    <img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="...">
                </a>
                <div class="caption img-responsive">
                    <h4 class="text-center"><a href="url" title="title" class="homepage anchorhead text-uppercase">Nice title</a>
                    </h4>
                    <p class="text-center">
                        <a href="#" class="homepage city text-uppercase">
                            <span class="glyphicon glyphicon-globe"></span>usa</a>
                    </p>
                </div>
            </div>
        </div>

    </div>
</body>

</html>

Answer 2

This CSS should do the trick: 这个CSS应该可以解决这个问题：

.thumbnail {
  display: inline-block;
  position: relative;
  border: none !important;
  padding: 0;
}
.thumbnail .caption{
  position: absolute;
  bottom: 0px;
  background: rgba(0,0,0,0.50);
  width: 100%;
  padding: 0px !important;
}

Bootstrap对齐标题相对于图像宽度而不是容器

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-04-18 12:41:01

解决方案2
1 2014-04-18 12:27:41

Bootstrap对齐标题相对于图像宽度而不是容器

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-04-18 12:41:01

解决方案2 1 2014-04-18 12:27:41

解决方案1
2 已采纳 2014-04-18 12:41:01

解决方案2
1 2014-04-18 12:27:41