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

有没有办法让面板将面板的宽度缩小到内容的宽度。我希望面板在主体中包装一个图像，然后在页脚中添加标题，但我不喜欢面板跨越周围容器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>

描述上面图像的标题。

---

我对其他想法持开放态度，我对引导和web开发基本上是新手

如果要将div width设置为image width，请使用javascript或jquery

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

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

$（文档）.ready（函数（）{
var-mgwidth=0；
$（“.panel”）。每个（函数（）{
实施宽度=$（“img”，this）.width（）；
$（this）.width（this.width）；
});
});

我刚刚尝试过这个，它打破了img响应类，需要刷新以调整图像大小，以适应屏幕大小的任何变化。另外，它似乎左对齐，我想一个中心对齐。