在引导程序中，将. img响应放在“容器流体”和“行”中？

Question

我不希望这里的答案能对21世纪的计算机科学有所帮助，但我很感谢社区的帮助。

我有一个图像，我正试图集中在引导中。它在一个中。容器液体，a。行和a行。col-xs-6带。偏移量-xs-3。<代码>

图像没有居中——我应该能够得到一个与视口宽度（la SVG）缩放并且位于页面中间的图像。我似乎无法管理它。

我想知道这是否与我从dropbox中获取一个“原始”图像作为我的src有关，该图像是一个。jpg，还是某种组合？再说一次，我对这一点很在行，所以也有可能在我找不到的地方出现了一个拼写错误。我已经看过引导程序文档，还有各种各样的SO问题都没有用。我找到的唯一解决方案是删除

PS-完全无关，但我的<代码>

事实证明，基本问题是CodePen依赖于Bootstrap 4，而不是（我假设的）Bootstrap 3。




Answer 1

您正在使用Bootstrap 3中的类，但从Bootstrap 4加载样式表；它们不兼容所有板。img-响应不再存在，以及col-xs-*类。请参阅图像和网格选项。

注意：您的链接将无法工作，因为它们不是有效的HTML，并且您还将用h3关闭h2，验证您的标记。

工作示例：

@media (max-width: 480px) {
  h1 {
    font-size: 5vmax;
  }
  h2 {
    font-size: 3.5vmax;
  }
  h3 {
    font-size: 2.5vmax;
  }
  li {
    font-size: 2.5vmax;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="jumbotron">

  <h1 class="text-primary">Dr. Clair Cameron Patterson</h1>

  <h2 class="text-secondary">The man who first learned the age of the Earth, and helped save a civilization from the dangers of its use of lead.</h2>

  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <img src="https://www.dropbox.com/s/91fw6aazyxzb178/image-for-codecamp-tribute-page.jpg?raw=1" alt="Cartoon Image of Clair Cameron Patterson at Congressional Hearing" class="img-fluid mx-auto d-block" style="padding:1.5vmin">
      </div>
    </div>
  </div>

  <h3>Academics</h3>
  <ul>
    <li>Undergraduate, Grinnell College</li>
    <li>PhD, University of Chicago</li>
    <li>Researcher, California Institute of Technology</li>
  </ul>

  <h3>Brief Timeline</h3>

  <ul>
    <li><strong>1956</strong>: found the earth to be 4.55 Billion years old using <a href="https://en.wikipedia.org/wiki/Lead%E2%80%93lead_dating">lead-lead dating</a> and
      <a href="https://en.wikipedia.org/wiki/Canyon_Diablo_(meteorite)">a fragment of a metorite that fell in Arizona</a>. This calculation has been largely undisturbed since.</li>
    <li><strong>1965</strong>: began campaign against lead in various products, especially gasoline, which at that time was emitting lead into the atmosphere.</li>
    <li><strong>1978</strong>: wrote a 78-page minority opinion as part of a National Research Council (NRC) panel stating that controls on lead in various products had to start immediately, including gasoline, food containers, paint, glazes, and water distribution
      systems.
    </li>
    <li>by the late <strong>1990s</strong>: levels of lead in Americans' blood has dropped by up to 80%. Though connections with Dr. Patterson's work are not clear, as the leading researcher in the area, and constant campaigner against the use of lead, it
      is likely he was a major antecedant of this change.</li>
  </ul>

</div>