Bootstrap white bar

我正在我的个人网站上工作。一切看起来都不错，屏幕尺寸超过了我不确定的尺寸，但它围绕着小屏幕尺寸。当我点击那个小宽度时，我的屏幕右侧出现了这个白色条。Bootstrap white bar

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

谢谢你的任何建议。

来源

2016-01-27 Dylan Hobday

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

如果你想要那个容器是500px的一个特定的分辨率，我建议建立一个@media查询，以支持它，或者您也可以设置最大宽度：500

来源

2016-01-27 03:53:06 cschaefer

另外，请一定要包括jQuery和引导程序的JavaScript以您的页面头部的顺序排列。否则，您的导航菜单在移动设备/分辨率时不会切换。它看起来不错，但！保持良好的工作！ – cschaefer

非常感谢您的帮助和赞扬。它现在效果很好。 –

Bootstrap white bar

回答

相关问题