在引导程序中的“.container-fluid”和“行”中将“.img-responsive”居中?
Posted
技术标签:
【中文标题】在引导程序中的“.container-fluid”和“行”中将“.img-responsive”居中?【英文标题】:Center a `.img-responsive`, in a `.container-fluid` and `row`, in bootstrap? 【发布时间】:2017-06-22 19:01:06 【问题描述】:我不希望这里的答案对 21 世纪对计算机科学的理解有多大帮助,但我感谢社区的帮助。
我有一个图像,我试图在引导程序中居中。它位于 .container-fluid
、.row
和带有 .offset-xs-3
的 .col-xs-6
中。 <img...>
本身就是 .img-responsive
。你可以在这个 codepen 上看到这个项目:http://codepen.io/NotAnAmbiTurner/pen/GrGmaq?editors=1000。
图像未居中 - 我应该能够获得随视口宽度(a la SVG)缩放并位于页面中间的图像。我似乎无法做到这一点。
我想知道这是否与我从保管箱中获取“原始”图像作为我的src
、图像是.jpg
或某种组合这一事实有关?再说一次,我是个菜鸟,所以同样有可能在我似乎找不到的地方有一个错字。我已经阅读了引导文档,并且各种 SO 问题都无济于事。我找到的唯一解决方案是从容器和行中删除<img...>
,并分配... class="centered-block" ...
。但是,除非我从根本上误解了某些东西,否则(1)我不应该这样做,并且(2)我不想通过抨击来了解我的概念错误在任何情况下是什么,以供我自己学习。
PS - 完全不相关,但我的 <a ...></a>
标签似乎不可点击。如果有人在那里有任何想法,那也很棒。
事实证明,基本问题是 CodePen 依赖于 Bootstrap 4,而不是(如我所假设的)Bootstrap 3。
【问题讨论】:
您是否正在尝试完成以下两种解决方案之一:codepen.io/themeler/pen/QdxBja? 我认为link 将帮助您将任何事情置于中心位置;)而here 和here 是关于您的问题的一些类似示例;) 【参考方案1】:您正在使用 Bootstrap 3 中的类,但从 Bootstrap 4 加载样式表;它们并非全面兼容。 img-responsive 以及 col-xs-* 类不再存在。请参阅Images 和Grid Options。
注意:您的链接将不起作用,因为它们不是有效的 html,而且您还使用 h3 validate 您的标记关闭了 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" 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>
【讨论】:
以上是关于在引导程序中的“.container-fluid”和“行”中将“.img-responsive”居中?的主要内容,如果未能解决你的问题,请参考以下文章