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>Home</b></a>
                  </li>
                  <li>
                     <a href="#">About</a>
                  </li>
                  <li>
                     <a href="#">Projects</a>
                  </li>
                  <li>
                     <a href="#">Contact</a>
                  </li>
                  <li>
                     <a href="#">Hire</a>
                  </li>
               </ul>
            </div>
            <!-- /.navbar-collapse -->
         <!-- /.container -->
      </nav>
      <div class="page-header">
         <h1><b>About</b></h1>
      </div>
      <div class="Wrapper" id="background">
        <div class="row">
         <div class="col-md-6 col-md-offset-3">
         <h1>Hello there, welcome to my website.</h1>
         </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('Backgrounds/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;
}
.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;
}
.row {
color: #5E5E5E;
position: relative;
top: 30px;
}

#head{
padding: 0px;
}
p {
font-size: 18px;
}
h2 {
color: #333;
}

非常感谢任何帮助。谢谢

Answer 1

尝试将.row包裹在.container或.container-fluid内，如下所示：

<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 website.</h1>
      </div>
    </div>
  </div>
</div>

我页面右侧的白条。引导

1 个答案: