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中使用它们，从顶部的一个h1开始，然后根据需要向下级联。尝试尽可能多地使用内置类，并最小化自定义类并合理使用它们。

理解这一点也有点不相关，但是应该注意，因为你的新增加了对你的<button>的{{1}}应该是a nchor标签，使用类内置系统内置的引导程序btn在CSS中全局设置它们。

下面是一个带有“响应式”jumbotron背景的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;
}

Bootstrap Jumbotron背景图像

1 个答案: