Question

我正在尝试创建包含图片和标题的图片，其中包含标题，说明和进度条。

他们看起来像这样

<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/

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

非常感谢任何帮助：）

Answer 1

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

修改

问题在于

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

删除它，你没事。

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

Bootstrap 3：图中的图形

1 个答案: