Question

我试图在一个有描述的jumbotron里面制作一个缩略图图标，但没有任何效果。请你看看，告诉我我做错了什么？

<div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="jumbotron">
<h1 class="text-center">Kevin Mitnick</h1>
<h3 class="text-center">The World's Most Famous hacker</h3>
  <div class="thumbnail"><img src="https://i.ytimg.com/vi/Nn3O8XD1z0w/maxresdefault.jpg" alt="Kevin's Picture">
    <div class="caption text-center"><p>Kevin Mitnick talking in the popular YouTube channel "Big Think".</p></div>
          </div>
</div>
</div>
</div>
</div>

和css：

body {
  margin-top: 60px;
}

Answer 1

您必须调整图像大小或为img标记添加宽度和高度样式。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="jumbotron">
<h1 class="text-center">Kevin Mitnick</h1>
<h3 class="text-center">The World's Most Famous hacker</h3>
  <div class="thumbnail"><img src="https://i.ytimg.com/vi/Nn3O8XD1z0w/maxresdefault.jpg" alt="Kevin's Picture">
    <div class="caption text-center"><p>Kevin Mitnick talking in the popular YouTube channel "Big Think".</p></div>
          </div>
</div>
</div>
</div>
</div>

Answer 2

Bootstrap有一个应用此效果的类：img-responsive。这会将max-width: 100%;，height: auto;和display: block;应用于图像，以便它可以很好地扩展到父元素。

在即将推出的Bootstrap 4版本中，此课程已更改为img-fluid。

<img src="..." class="img-responsive" alt="Responsive image">

可以在Bootstrap's site和Bootstrap 4 Alpha page上找到更多信息。

Answer 3

如果我理解正确，你不希望图像溢出它的父元素之外吗？在这种情况下，您可以添加overflow: hidden;或者为响应式和可扩展的图像添加类img-responsive到图像标记。

如何阻止图像在bootstrap过度浮动？

3 个答案: