html - 如何根据图像响应宽度调整文本宽度

Question

自一周前我开始学习这些东西以来，我是 html5/css3 和 Bootstrap 世界的新手。

我的问题是我希望文本宽度(显示文本的区域宽度)与响应图像的宽度相应。当页面处于 lg/md/sm 响应模式时，文本会根据“其宽度”正确显示在图像下方，但当处于 xs 响应模式时，文本不会正确显示。

我想要的图片:

http://imgur.com/F2Y4afD

您提出的解决方案(问题仍然存在!)的图像(链接必须是图像，用键盘键切换!):

http://imgur.com/tYKixk5,g9EkoM4#1

这是 HTML 代码:

<div class="container">
  <div class="page-header" id="p-h-1">
    <h1>Latest News</h1>
  </div>
  <div class="row">
    <div class="col xm-12 col-sm-4">
      <figure>
        <img src="images/prova.jpg" class="img-responsive center-block" /></figure>
        <h3 class="text-center">Prova</h3>
        <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
    <div class="col xm-12 col-sm-4">
      <figure><img src="images/prova.jpg" class="img-responsive center-block" /></figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
    <div class="col xm-12 col-sm-4">
      <figure><img src="images/prova.jpg" class="img-responsive center-block" /></figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
  </div>
</div>

有什么想法吗？

对不起，我的英语不好，这不是我的母语，如果我的问题被一遍又一遍地回答，但我不知道要搜索哪些关键字，我很抱歉......

我发现这个解决方案对我有用(我仍然需要知道图像大小才能为

元素添加固定宽度:

<div class="container">
  <div class="page-header" id="p-h-1">
    <h1>Latest News</h1>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <figure>
        <img src="images/prova.jpg" class="img-responsive center-block" /></figure>
        <h3 class="text-center">Prova</h3>
        <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-12 col-sm-4">
      <figure><img src="images/prova.jpg" class="img-responsive center-block" /></figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-12 col-sm-4">
      <figure><img src="images/prova.jpg" class="img-responsive center-block" /></figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
    </div>
    <div class="clearfix visible-xs-block"></div>
  </div>
</div>

这里是 CSS:

@media (max-width: 767px) {
  p {
    text-align: center;
    border: solid black 1px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    /* Based on figure width */
    width: 430px;
  }
}

Answer 1

您可以将网格更改为 col-xs-6 并使用 col-xs-offset-3 应用偏移

输出:

@media (max-width: 767px) {
  p {
    text-align: center;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="page-header" id="p-h-1">
    <h1>Latest News</h1>
  </div>
  <div class="row">
    <div class="col-xs-6 col-xs-offset-3 col-sm-offset-0 col-sm-4">
      <figure>
        <img src="http://placehold.it/300x300" class="img-responsive center-block" />
      </figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous
        tourist attraction in Norway.</p>
    </div>
    <div class="col-xs-6 col-xs-offset-3 col-sm-offset-0 col-sm-4">
      <figure>
        <img src="http://placehold.it/300x300" class="img-responsive center-block" />
      </figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous
        tourist attraction in Norway.</p>
    </div>
    <div class="col-xs-6 col-xs-offset-3 col-sm-offset-0 col-sm-4">
      <figure>
        <img src="http://placehold.it/300x300" class="img-responsive center-block" />
      </figure>
      <h3 class="text-center">Prova</h3>
      <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous
        tourist attraction in Norway.</p>
    </div>
  </div>
</div>