ブートストラップジャンボトロン背景画像

Question

このサイトを数時間上下に検索していて、ジャンボトロンの背景画像を反応させるのが間違っているとわかりません（私はブートストラップにまったく新しいものです）。私は以下のすべてを試してみましたが、何もできません。サイズを変更すると画像が極端に引き伸ばされ、下または上でカットされたり、絞られたりします。私も同様に含まれてみましたが、それはイメージを小さすぎるものにします。

.jumbotron { 
    height:600px; 
    background: url("JoelCanada.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    background-size: 100% 100%; 
    } 
.jumbotron { 
    height:600px; 
    background: url("JoelCanada.jpg") no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

そして、ここにHTML

<div class="jumbotron jumbotron-fluid"> 
    <div class="container jumboText"> 


       <h2> Discover </h2> 
<p> Text </p> 
    <button type="submit" name="countries" class="jumboButton"> Button &#8696 </button> 
    <button type="submit" name="countries" class="jumboButton"> Button &#8696 </button> 
    <button type="submit" name="countries" class="jumboButton"> Button &#8696 </button> 
       </div> 
     </div> 

は任意の助けで、それは意図的だったが、あなたは一度だけ.jumbotronクラスのスタイルを設定するかどうかわからない

Answer 1

を高く評価しました。

余分なクラスjumboTextは、現在のブートストラップクラスの規約とハイフン-を使用して一致しないキャメルケースを使用します。一貫性のためにヘッダータグのスタイルを設定し、階層のHTMLで使用します。最初はh1から始まり、必要に応じてページを1つ上に移動します。できるだけ組み込みのクラスを使用し、カスタムクラスを最小限に抑えて理由を付けて使用してみてください。これを理解する

も少しは関係ありませんが、ブートストラップをあなたの新しいが、あなたの<button>年代は、クラスのシステムに組み込まれたブートストラップbtnを使用してa nchorタグも、あなたのCSSでグローバルにそれらのスタイルを設定する必要がありので、表記する必要があります。

以下

「応答」ジャンボトロンの背景をいじるです：あなたは、フレームワークに精通しているまで、多くの場合、これを参照することもできます https://jsfiddle.net/jeremykenedy/p1u3aryv/10/

：

http://getbootstrap.com/css/ http://getbootstrap.com/components/ http://getbootstrap.com/javascript/

FIDDLEの表示内容：

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <form class="navbar-form navbar-right"> 
     <div class="form-group"> 
      <input type="text" placeholder="Email" class="form-control"> 
     </div> 
     <div class="form-group"> 
      <input type="password" placeholder="Password" class="form-control"> 
     </div> 
     <button type="submit" class="btn btn-success">Sign in</button> 
     </form> 
    </div> 
    <!--/.navbar-collapse --> 
    </div> 
</nav> 

<!-- Main jumbotron for a primary marketing message or call to action --> 
<div class="jumbotron"> 
    <div class="container"> 
    <h1>Hello, world!</h1> 
    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p> 
    </div> 
</div> 

<div class="container"> 
    <!-- Example row of columns --> 
    <div class="row"> 
    <div class="col-md-4"> 
     <h2>Heading</h2> 
     <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
    </div> 
    <div class="col-md-4"> 
     <h2>Heading</h2> 
     <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
    </div> 
    <div class="col-md-4"> 
     <h2>Heading</h2> 
     <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
    </div> 
    </div> 

    <hr> 

    <footer> 
    <p>&copy; 2016 Company, Inc.</p> 
    </footer> 
</div> 
<!-- /container --> 

CSS：

.jumbotron { 
    background: url(https://s3-us-west-2.amazonaws.com/consultjeremy.com/backgrounds/about-bg.jpg) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-height: 600px; 
    color: #ffffff; 
}