Question

我正在我的个人网站上工作。屏幕尺寸看起来都很好，超出了我不确定的尺寸，但是它的尺寸都是小屏幕尺寸。当我点击那个小宽度时，我会在屏幕右侧看到这个白色条。

HTML：

    <!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <title>Dylan Hobday | Web Developer</title>
      <link rel="stylesheet" href="Styles/Bootstrap.min.css">
      <link rel="stylesheet" href="Styles/Index.css">
   </head>
   <body>
      <nav class="navbar navbar-default white" id="navbar" role="navigation">
         <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
               <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="#">Dylan Hobday</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
               <ul class="nav navbar-nav">
                  <li class="active">
                     <a href="#"><b>About</b></a>
                  </li>
                  <li>
                     <a href="#">Projects</a>
                  </li>
                  <li>
                     <a href="#">Contact</a>
                  </li>
                  <li>
                     <a href="#">Hire</a>
                  </li>
               </ul>
            </div>
            <!-- /.navbar-collapse -->
         </div>
         <!-- /.container -->
      </nav>
      <div class="page-header">
         <h1><b>About</b></h1>
      </div>
      <div class="Wrapper" id="background">
         <div class="container">
            <div class="row">
               <div class="col-md-6 col-md-offset-3">
                  <h1>Hello there, welcome to my site.</h1>
               </div>
            </div>
            <div class="row">
               <div class="col-md-2 col-md-offset-1" id="row2">
                  <h2><b>Who Am I?</b></h2>
                  <p>I am an aspiring web developer working to become a professional. This website is going to serve as a home for all of my projects, ideas, and discussions to show to potential employers.</p>
               </div>
            </div>
         </div>
      </div>
   </body>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="Scripts/js/Index.js"></script>
   <script src="Scripts/js/Bootstrap.min.js"></script>
</html>

CSS：

body, html {
Width: 100%;
height: 100%;
}

.Wrapper{
Width: 100%;
height: 667px;
background-image: url('Background.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.white{
background-color: white;
}
.navbar {
margin-bottom: 0px;
font-size: 26;
}
.navbar-nav > li {
font-size: 17px;
padding-left: 5px;
padding-right: 5px;
}
.container{
Width: 100%;
Height: 100%;

}
.page-header {
Font-size: 30;
margin: 0px;
background-color: #1D262C;
color: white;
Height: 100px;
border: none;
}
h1 {
margin: 0px;
padding-left: 50px;
padding-top: 30px;
}
@media(max-width: 480px) {
  h1 {
    font-size: 14;
    text-align: center;
  }
}
.row {
color: #5E5E5E;
position: relative;
top: 30px;
}
.active {
color: black;
}
#head{
padding: 0px;
}
p {
font-size: 24px;
}
#row2{
float:left;
position: relative;
top: 30px;
color: #292929;
Width: 500px;
}
h2 {
color: black;
}

感谢您的任何建议。

Answer 1

您需要删除＃row2的宽度。由于bootstrap响应，当屏幕宽度小于500px时，bootstrap会将所有元素调整为屏幕宽度，但该元素仍为500px。

如果您希望该容器的特定分辨率为500px，我建议您创建一个@media查询来支持它，或者您也可以设置max-width：500。

Bootstrap白条

1 个答案: