浏览器窗口缩小时，Bootstrap网页无法正确显示

时间：2015-09-12 18:35:28

标签： html css twitter-bootstrap

我目前正在使用Bootstrap构建我的第一个网站 - 我已经取得了进展但在浏览器窗口变小时如何定位内容时遇到了问题。我已将页面内容包装在.container-fluid类中，但由于某种原因，只要屏幕宽度低于990像素，页脚区域（包含联系信息）就会向上移动一半。是什么造成的？非常感谢任何帮助，谢谢。

http://www.jonhowlett.uk 

<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-target=".navbar-collapse"
            data-toggle="collapse" type="button"><span class=
            "icon-bar"></span> <span class="icon-bar"></span> <span     class=
            "icon-bar"></span></button>
        </div>

        <div class="navbar-collapse collapse" id="navbar">
            <ul class="nav navbar-nav navbar-left">
                <li>
                    <a href=
                    "http://www.jonhowlett.uk/home_page.html">JH</a>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href=
                    "#">About<span class="caret"></span></a>

                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">Biography</a>
                        </li>

                        <li>
                            <a href=
                            "http://www.jonhowlett.uk/hobbies.html">Hobbies</a>
                        </li>

                        <li>
                            <a href=
                            "http://www.jonhowlett.uk/resume.html">Work
                            History</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="#">Portfolio</a>
                </li>

                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div id="removepadding">
    <div class="container-fluid">
        <div class="jumbotron">
            <!--style as .container .jumbotron-->

            <h1>Jon Howlett</h1><!--style as .jumbotron .container h1-->

            <p>Aspiring web designer and front-end developer</p>
            <!--style as .jumbotron .container p-->
        </div>
    </div><!--container-fluid-->
</div><!--remove padding-->

<div id="summary-row">
<div class="container">
<div class="row">
    <div class="col-md-4"><img src="images/placeholder.jpg" class="img-responsive" alt="placeholder">
        <p></p>
    </div>
    <div class="col-md-4"><img src="images/placeholder.jpg" class="img-responsive" alt="placeholder">
        <p></p>
    </div>
    <div class="col-md-4"><img src="images/placeholder.jpg" class="img-responsive" alt="placeholder">
        <p></p>
    </div>  
</div>
</div>
</div>
<div id="homepage_footer">  
  <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <ul class="nav nav pills" id="menu-footer-navigation">
                        <li>
                            <a href="#">Twitter</a>
                        </li>

                        <li>
                            <a href="#">Facebook</a>
                        </li>

                        <li>
                            <a href="#">LinkedIn</a>
                        </li>
                    </ul>
                </div>

                <div class="col-md-6">
                    <div class="rightside">
                    <div id="telephone">
                        07557 302 517
                    </div>
                    <div id="email">
                        jon@jonhowlett.uk
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
</div>`

4 个答案:

答案 0 :(得分：0)

您可以在media queries的帮助下完成此操作。例如，对于小于990px​​的显示，您需要编写此样式表：

@media screen and (min-width: 990px) {
    // Your CSS here
}

Here是演示示例。

＆＃13;
＆＃13; 
h1 {
    color: red;
}

@media screen and (max-width: 990px) {
    h1 {
        color: green;    
    }
}
＆＃13; 
<h1>Hello world</h1>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您应该关闭此CSS类：

#summary-row {
    height: 500px;
}

答案 2 :(得分：0)

如果没有必要，请删除高度：500px摘要行，或在设备更改宽度时调整为小屏幕（在您调整浏览器大小的情况下）

答案 3 :(得分：0)

此ID＆gt; #summary-row { height: 500px; }是另一个DIV覆盖页脚的问题，但是您应该看到其他区域导致结构问题，主要是在视口减少时。

由于custom_new.css：.container .row { width: 1140px; margin-left: auto; margin-right: auto; }中的此规则，您的内容会在浏览器的右侧被截断。覆盖规则非常好，但将它们应用于细粒度实例非常重要，这样它们就不会改变整个布局/使用相同默认规则的其他部分，或确保更改能够正常工作全球。 （在第一个Jumbtron规则结尾处还有一个额外的右括号; 。）

如果您希望Jumbotron为fillwidth，请在container div中放置jumbotron div，查看文档Bootstrap 3 Jumbotron。

您有许多类/ ID（特别是对于页脚），它们似乎是多余的，可以减少或组合。

它应该是.nav-pills，而不是.nav .pills（至少就Bootstrap来说，请参阅文档Bootstrap 3 NAVs。

显然有许多新的缺陷，这些要点仅仅是为了提高意识。

请参阅下面的示例代码段示例。

＆＃13;
＆＃13; 
@import url('https://fonts.googleapis.com/css?family=Allerta+Stencil%7CAbel%7CRoboto%7CPacifico');
 html {
  overflow-x: hidden;
}
html,
body {
  overflow-y: none;
  height: 100%;
  margin-top: 130px;
}
.navbar.navbar-default {
  background-color: white;
  padding: 35px;
  border-bottom: 10px solid #F2F2F2;
}
.navbar-default .navbar-nav.navbar-right > li > a,
.navbar-default .navbar-nav.navbar-right .dropdown-menu > li > a {
  font-size: 20px;
  font-family: 'Abel', Arial;
  text-transform: uppercase;
  color: black;
}
.navbar-default .navbar-nav.navbar-left > li > a {
  font-family: 'Allerta Stencil', arial;
  font-size: 40px;
  color: black;
}
.jumbotron {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/e/e6/Los_Angeles_-_Echangeur_autoroute_110_105.JPG');
  width: 100%;
  height: 580px;
  border-bottom: 10px solid #F2F2F2;
  background-position: center;
  background-size: cover;
}
.jumbotron .container h1 {
  font-family: 'Allerta Stencil', arial;
  font-size: 100px;
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  margin-top: 70px;
  color: #fff;
}
.jumbotron .container p {
  font-family: 'Pacifico', arial;
  text-align: center;
  font-size: 60px;
  margin-top: 30px;
  color: #fff;
}
#summary-row p {
  padding-top: 15px;
  text-align: center;
}
#summary-row img:hover {
  filter: brightness(70%);
  -webkit-filter: brightness(70%);
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
}
footer {
  font-family: 'Abel', Arial;
  bottom: 0;
  height: 175px;
  margin-top: 25px;
  padding: 30px 5px;
  width: 100%;
  background-color: #404241;
  color: white;
}
footer a {
  color: white;
  text-decoration: none;
}
footer ul.nav.nav-pills > li {
  text-transform: uppercase;
  text-align: left;
}
footer ul.nav.nav-pills > li > a:hover,
footer ul.nav.nav-pills > li > a:focus {
  background-color: red;
  color: white;
  border-radius: 0;
}
footer .rightside {
  font-size: 30px;
  text-align: right;
}
@media (max-width: 767px) {
  .jumbotron {
    height: 380px;
  }
  .jumbotron .container h1 {
    font-size: 50px;
    margin-top: 30px;
  }
  .jumbotron .container p {
    font-size: 30px;
    margin-top: 10px;
  }
  footer .rightside {
    margin-top: 10px;
    font-size: 15px;
  }
}
＆＃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 navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button"><span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>

      </button>
    </div>
    <div class="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav navbar-left">
        <li> <a href="http://www.jonhowlett.uk/home_page.html">JH</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">About<span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li> <a href="#">Biography</a>

            </li>
            <li> <a href="http://www.jonhowlett.uk/hobbies.html">Hobbies</a>

            </li>
            <li> <a href="http://www.jonhowlett.uk/resume.html">Work
                            History</a>

            </li>
          </ul>
        </li>
        <li> <a href="#">Portfolio</a>

        </li>
        <li> <a href="#">Contact</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="jumbotron">
  <div class="container">
    <!--style as .container .jumbotron-->
    <h1>Jon Howlett</h1>

    <!--style as .jumbotron .container h1-->
    <p>Aspiring web designer and front-end developer</p>
    <!--style as .jumbotron .container p-->
  </div>
</div>
<!--remove padding-->
<div class="container">
  <div class="row" id="summary-row">
    <div class="col-md-4">
      <img src="https://www.airshare.co.nz/sites/default/files/NZ_0.jpg" class="img-responsive" alt="placeholder">
      <p>ultrices mollis pulvinar enim, in diam. Cras posuere justo tempor pretium vitae, urna consectetuer amet ultricies diam morbi provident, quos ut ipsum, tempus fusce, eget nullam condimentum suscipit suspendisse. Semper nulla at, leo ut, sed metus
        nunc eros a, et sapien nisl wisi magna dolor, sit lorem hymenaeos. Orci morbi</p>
    </div>
    <div class="col-md-4">
      <img src="https://www.airshare.co.nz/sites/default/files/NZ_0.jpg" class="img-responsive" alt="placeholder">
      <p>ultrices mollis pulvinar enim, in diam. Cras posuere justo tempor pretium vitae, urna consectetuer amet ultricies diam morbi provident, quos ut ipsum, tempus fusce, eget nullam condimentum suscipit suspendisse. Semper nulla at, leo ut, sed metus
        nunc eros a, et sapien nisl wisi magna dolor, sit lorem hymenaeos. Orci morbi</p>
    </div>
    <div class="col-md-4">
      <img src="https://www.airshare.co.nz/sites/default/files/NZ_0.jpg" class="img-responsive" alt="placeholder">
      <p>ultrices mollis pulvinar enim, in diam. Cras posuere justo tempor pretium vitae, urna consectetuer amet ultricies diam morbi provident, quos ut ipsum, tempus fusce, eget nullam condimentum suscipit suspendisse. Semper nulla at, leo ut, sed metus
        nunc eros a, et sapien nisl wisi magna dolor, sit lorem hymenaeos. Orci morbi</p>
    </div>
  </div>
</div>
<footer>
  <div class="container">
    <div class="row">
      <div class="col-xs-6">
        <ul class="nav nav-pills">
          <li> <a href="#">Twitter</a>

          </li>
          <li> <a href="#">Facebook</a>

          </li>
          <li> <a href="#">LinkedIn</a>

          </li>
        </ul>
      </div>
      <div class="col-xs-6">
        <div class="rightside">
          <div id="telephone">07557 302 517</div>
          <div id="email">jon@jonhowlett.uk</div>
        </div>
      </div>
    </div>
  </div>
</footer>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题