ブートストラップの `.container-fluid`と` row`に `.img-responsive`を中心に置いていますか？

Question

ここでの答えは21世紀のコンピュータサイエンスの理解に大きく寄与するとは思っていませんが、私はコミュニティの助けに感謝しています。

私にはイメージがあります。私はブートストラップに集中しようとしています。 .container-fluid、.row、.col-xs-6、.offset-xs-3です。 <img...>自体は.img-responsiveです。このcodepenでプロジェクトを見ることができます：http://codepen.io/NotAnAmbiTurner/pen/GrGmaq?editors=1000。

画像がセンタリングされていない - ビューポート幅（a SVG）で拡大縮小され、ページの中央にある画像を取得できるはずです。私はそれを管理するように見えることはできません。

私は、画像が.jpg、またはいくつかの組み合わせであることを私がsrcとしてドロップボックスから「生の」画像を取っているという事実と関係があるのでしょうか？それではまた、私はこれのノブだから、見つけられないようなタイプミスがある可能性も同じです。私はブートストラップのドキュメントと、さまざまなSOの質問を無駄にしてきました。私が見つけた唯一の解決策は、<img...>をコンテナと行から削除し、... class="centered-block" ...を割り当てることです。しかし、私は根本的に何かを間違っていない限り、（1）私はそれをする必要はありません。（2）私が自分の学習のために私の概念的な誤りが何であるかを理解したいと思います。

PS - 完全に無関係ですが、<a ...></a>タグはクリック可能ではありません。誰かがそこにアイデアを持っているなら、それも素晴らしいでしょう。

基本的な問題は、CodePenがブートストラップ4に依存していることです。ブートストラップ3ではありません。

Answer 1

ブートストラップ3のクラスを使用していますが、ブートストラップ4からスタイルシートをロードしています。彼らは全面的に互換性がありません。 img-responsiveはcol-xs- *クラスと同様に存在しなくなりました。 ImagesおよびGrid Optionsを参照してください。

注：あなたのリンクは有効なHTMLではないため、h3、validateマークアップでh2を閉じているため、リンクは機能しません。

実施例：http://codepen.io/themeler/pen/QdxBja：

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