twitter-bootstrap - 将面板宽度缩小到内容的宽度

Question

有没有办法让面板将面板的宽度缩小到内容的宽度。我希望让面板将图像包裹在正文中，然后在页脚中添加标题，但我不喜欢面板跨越周围容器 div 的整个宽度。

我目前使用的html是:

<div class="panel panel-default">
  <div class="panel-body">
    <img class="img-responsive img-rounded center-block" alt="some alt text" src="a_path_to_a.jpg" />
  </div>
  <div class="panel-footer text-venter">A caption describing the image above.</div>
</div>

我对替代想法持开放态度，一般来说，我对 Bootstrap 和 Web 开发是新手。

Answer 1

如果要将 div 宽度设置为图像宽度，请使用 javascript 或 jquery。

这是我将所有 div 设置为内部 img 宽度的类面板的示例代码。
我希望会有所帮助。

<script type="text/javascript">
    $(document).ready(function () {
        var actualImgWidth = 0;
        $(".panel").each(function () {
            actualImgWidth = $("img", this).width();
            $(this).width(actualImgWidth);
        });
    });
</script>