Bootstrap Jumbotron没有缩小到适合

时间：2015-10-08 21:19:55

标签： html css twitter-bootstrap

我正在使用Bootstrap为网站创建一个jumbotron，而我在使用jumbotron时没有在小屏幕上正确调整大小的问题。

这是我的代码

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;
}

背景图像在移动设备上正确调整大小，当我收缩浏览器屏幕但文字和容器没有调整到合适的大小。当我带走高度：500px; jumbotron无法在任何地方正确显示。

任何帮助？

1 个答案:

答案 0 :(得分：1)

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

*更新： enter image description here 1）这个CSS文件（crosscreekcattle.css）需要在Bootstrap CSS文件之后，以便应用来自Bootstrap的任何更改（作为一般规则）。

2）如最初所述（＆＃34;其他任何需要调整的东西＆＃34;），您需要在您认为合适的断点处更改Jumbotron内部文本的字体大小。

直接在下面添加/更改CSS ：在全屏显示代码段中的工作示例，然后缩小浏览器大小。

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

＆＃13;
＆＃13; 
.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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题