Bootstrap Jumbotron背景图片

Question

已经搜索这个网站上下几个小时，并且无法弄清楚使jumbotron背景图像响应（我是全新的bootstrap）有什么问题。我已经尝试了下面的所有内容，没有任何工作。调整大小时的图像将非常伸展，在底部或顶部切断或挤压。我试过包含，但这使得图像太小。

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

任何帮助表示赞赏

Answer 1

不知道这是否是故意的，但你应该只风格的.jumbotron类一次。

您的额外类别jumboText使用camelcase，它与当前引导程序类惯例不匹配，使用连字符-。为了保持一致性，请在全局上设置标题标签的样式，并在层次结构中将它们用于HTML层次结构中，并且从顶部的一个页面开始，然后根据需要级联。尝试尽可能多地使用内置类，并尽量减少定制类，并合理使用它们。

了解这个也有点无关，但应该因为你的新来谱写，以自举，但你的<button>的应该是使用内置类系统引导btna nchor标签和在你的CSS样式全局它们。

下面是与“快速响应”的超大屏幕背景FIDDLE： 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; 
}