Bootstrap 3：Figure 内的 Figcaption答案

【问题标题】：Bootstrap 3: Figcaption inside FigureBootstrap 3：Figure 内的 Figcaption
【发布时间】：2014-08-08 22:36:09
【问题描述】：

我正在尝试创建包含图像和标题的图形，其中包含标题、描述和进度条。

它们看起来像这样

<figure class="col-sm-6 item game">

    <a href="item.html"><img src="http://placehold.it/440x250&text=440x250+Game" class="img-responsive" alt="Game"></a>

      <!-- Item Hover Options -->
      <figcaption>
        <!-- Item Title -->
        <h1>Game Title</h1>
        <!-- Item Description -->
        <p>Game Description</p>
        <!-- Item Progress -->
        <div class="progress progress-striped">
          <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
            <span class="sr-only">20% Complete</span>
          </div><!-- END progress bar -->
        </div><!-- END progress div -->

      </figcaption>

    </figure>

我遇到的问题是，当浏览器调整为移动视图大小时，figcaption 也没有调整大小......

这是我目前所拥有的小提琴：http://jsfiddle.net/DK76P/1/

正如您在调整预览框大小时所看到的，标题不会相应地调整大小...

非常感谢任何帮助:)

【问题讨论】：

stackoverflow.com/questions/11460066/… 可能会对问题有所了解

标签： css html twitter-bootstrap

【解决方案1】：

它影响整个 figcaption 元素，它是引导程序的 css 中的东西 - 可能是非移动部分

编辑

问题出在

.panel-body {
    width: 960px;
    ...

删除它，你就没事了。

阅读 Bootstrap 网格系统以获取更多信息http://getbootstrap.com/css/#grid

【讨论】：