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

标签 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>`

最佳答案

这个ID> #summary-row { height: 500px; 是页脚被另一个 DIV 覆盖的问题，但您应该查看其他区域导致结构性问题，主要是当视口(viewport)缩小时。

由于 custom_new.css 中的这条规则，您的内容在浏览器右侧被截断:.container .row { width: 1140px;左边距:自动；右边距:自动； }。覆盖规则非常好，但重要的是将它们应用于细粒度实例，这样它们就不会改变您的整个布局/使用相同默认规则的其他部分，或确保更改将在全局范围内起作用。 (在第一个 Jumbtron 规则的末尾还有一个额外的右括号 ;)。

如果您希望 Jumbotron 为 fillwidth，请在 jumbotron div 中放置一个 container div 参见文档 Bootstrap 3 Jumbotron .

您有许多类/ID(尤其是页脚)，它们看起来多余，可以减少或合并。

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

任何新事物显然都有很多陷阱，这些点只是为了提高认识。

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

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

关于html - 当浏览器窗口缩小时，Bootstrap 网页无法正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32542328/

上一篇：javascript - 如何标记我的 html 范围 slider ？

下一篇：javascript - 更改标签值时如何更改标签的背景颜色

相关文章：

javascript - javascript 的内联样式更改在移动浏览器 (chrome/dolphin/android) 上不起作用 : why?

javascript - AngularJS:为什么我的按钮在 $index 的 ng-repeat track 中仍然有效

css - Bootstrap 响应 TableView 缺少表边框

javascript - 点击关闭？

html - 我想给这个编辑框添加背景图片，但是 CSS 对我来说太复杂了

css - 使用简单的 iframe 和 CSS 制作简单的顶部和左侧导航

html - 响应式数据表

CSS 覆盖问题。只有与字体相关的行有效

html - 缩小 col-md-6 的左右边框

html - 图像旁边垂直向下的字形图标

©2024 IT工具网  联系我们