html - Bootstrap Jumbotron 不会缩小以适应

Question

我正在使用 Bootstrap 为网站创建超大屏幕，但我遇到了超大屏幕无法在小屏幕上正确调整大小的问题。

这是我的代码

HTML

        <div class="jumbotron">
            <div class="container">
                <h1>Welcome to my jumbotron</h1>
                <p>Another line of text here</p>
            </div>
        </div>

CSS

.jumbotron .container h1 {
    color: black;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.jumbotron .container p {
    color: black;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.jumbotron {
    background-image: url(/Photos/BarnJumbo.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 500px;
}

背景图片在移动设备上可以正确调整大小，当我缩小浏览器屏幕时，文字和容器不会调整到合适的大小。当我拿走 height:500px;超大屏幕在任何地方都无法正确显示。

有什么帮助吗？

Answer 1

您可以使用媒体查询来更改高度和任何其他需要调整的内容。参见示例。

*更新: 1) 此 CSS 文件 (crosscreekcattle.css) 需要位于 Bootstrap CSS 文件之后，以便应用来自 Bootstrap 的任何更改(作为一般规则)。

2) 如最初所述(“任何其他需要调整的内容”)，您需要在您认为合适的任何断点处更改 Jumbotron 内文本的字体大小。

直接在下面添加/更改 CSS:在全屏模式下查看 Snippet 中的工作示例，然后减小浏览器大小。

.jumbotron {
  background: url(http://crosscreekcattlenc.com/Photos/BarnJumbo.jpg) center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 500px;
}
@media (max-width: 767px) {
  .jumbotron {
    height: 250px;
  }
  .jumbotron .container h1 {
    font-size: 25px;
  }
  .jumbotron .container p {
    font-size: 16px;
  }
}

.navbar .nav {
  padding: 5px;
}
.navbar .nav li {
  display: inline;
}
.navbar .nav a {
  color: black;
  padding: 15px;
  font-family: 'Trebuchet MS', "sans-serif";
  font-size: 15px;
}
.navbar .navbar-brand > img {
  object-fit: contain;
  max-height: 175%;
  height: 175%;
}
.jumbotron .container h1 {
  color: black;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.jumbotron .container p {
  color: black;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.jumbotron {
  background: url(http://crosscreekcattlenc.com/Photos/BarnJumbo.jpg) center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 500px;
}
.jumbotron-special {
  background-image: url(/Photos/CattleJumboo.jpg);
  background-repeat: no-repeat;
  height: 500px;
}
.services {
  background-color: #D5D5D5;
  padding-bottom: 20px;
  padding-top: 10px;
}
.services .container p {
  padding-bottom: 5px;
}
.about {
  padding-bottom: 50px;
}
.contact {
  background-color: #D5D5D5;
  padding-bottom: 20px;
}
.Flexible-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.information {
  padding-bottom: 25px;
}
.sale {
  background-color: #D5D5D5;
}
.row-special {
  padding-top: 20px;
}
.footer {
  background-color: #CBCBCB;
  padding-top: 10px;
}
.footer li {
  display: inline;
  padding-right: 60px;
}
@media (max-width: 767px) {
  .jumbotron {
    height: 250px;
  }
  .jumbotron .container h1 {
    font-size: 25px;
  }
  .jumbotron .container p {
    font-size: 16px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="CrossCreekCattle.html">
        <img src="http://crosscreekcattlenc.com/Photos/CCCNC.jpg" class="img-responsive">
      </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="home.html">Home <span class="sr-only">(current)</span></a>

        </li>
        <li><a href="About.html">About</a>

        </li>
        <li><a href="Cattle.html">Cattle</a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Links <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="https://www.facebook.com/CrossCreekCattle" target="_blank">Cross Creek Cattle Facebook</a>

            </li>
            <li><a href="http://www.redanguscarolinas.com/" target="_blank">Red Angus Assoication of the Carolinas</a>

            </li>
            <li><a href="http://www.seraa.org/" target="_blank">Southeast Red Angus Association</a>

            </li>
            <li><a href="http://redangus.org/" target="_blank">Red Angus Assoicaiton of America</a>

            </li>
            <li><a href="https://www.facebook.com/pages/2-Sisters-FOODS/367845410066719?fref=ts" target="_blank">2 Sisters FOODS</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="jumbotron">
  <div class="container">
    <h1>Welcome to Cross Creek Cattle</h1>

    <p>One of North Carolina&#39;s premier Red Angus Cattle Ranches</p>
  </div>
</div>
<div class="services">
  <div class="container">
    <div class="row">
      <div class="col-md-7">
        <h2>Who We Are</h2>

        <p>Cross Creek Cattle is located in Gold Hill, North Carolina. Started in 1981, it has been our mission to breed some of the best cattle in the Carolinas. With over 17 years of expierence in Red Angus, CCC has excelled in genetic quality that is
          evident in all of our cattle and embryos.</p> <a href="Cattle.html">Click here to learn more about what we have to offer.</a>
      </div>
      <div class="col-md-5">
        <div class="thumbnail">
          <a href="Cattle.html">
            <img src="http://crosscreekcattlenc.com/Photos/CowLink.jpg">
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="pictures">
  <div class="container">
    <div class="row text-center">
      <h2>Pictures From Around The Farm</h2>

    </div>
    <div class="row">
      <div class="col-md-4 col-sm-3">
        <div class="thumbnail">
          <img src="/Photos/Grid1.jpg">
        </div>
      </div>
      <div class="col-md-4 col-sm-3">
        <div class="thumbnail">
          <img src="/Photos/Grid2.jpg">
        </div>
      </div>
      <div class="col-md-4 col-sm-3">
        <div class="thumbnail">
          <img src="/Photos/Grid3.jpg">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 col-sm-3">
        <div class="thumbnail">
          <img src="/Photos/Grid4.jpg">
        </div>
      </div>
      <div class="col-md-4 col-sm-3">
        <div class="thumbnail">
          <img src="/Photos/Grid5.jpg">
        </div>
      </div>
      <div class="col-md-4 col-sm-3">
        <div class="thumbnail">
          <img src="/Photos/Grid6.jpg">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 col-sm-3">
        <div class="thumbnail">
          <img src="/Photos/Grid7.jpg">
        </div>
      </div>
      <div class="col-md-4 col-sm-3">
        <div class="thumbnail">
          <img src="/Photos/Grid8.jpg">
        </div>
      </div>
      <div class="col-md-4 col-sm-3">
        <div class="thumbnail">
          <img src="/Photos/Grid9.jpg">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="footer">
  <div class="container">
    <ul class="footer">
      <li><a href="CrossCreekCattle.html">Home</a>

      </li>
      <li><a href="About.html">About and Contact</a>

      </li>
      <li>Web Development by Keith Pringle</li>
    </ul>
  </div>
</div>