Question

    <!doctype html>
<html>
<head>

    <title>Home Page</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="main.css"/>
<link rel="stylesheet" href="style.css"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <header class ="navbar">
      <div class="container navbar-inverse">
        <nav role="navigation">
  <div class="container-fluid">
    <!-- 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="#">CASES4U</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 navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">iPhone <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">iPhone 3g/3gs</a></li>
            <li><a href="#">iPhone 4/4s</a></li>
            <li><a href="#">iPhone 5/5s</a></li>
            <li class="divider"></li>
            <li><a href="#">iPod</a></li>
          </ul>
        </li>
     <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Samsung <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Galaxy S 3</a></li>
            <li><a href="#">Galaxy S 4</a></li>
            <li><a href="#">Galaxy S 5</a></li>
            <li class="divider"></li>
            <li><a href="#">Galaxy Tab</a></li>
          </ul>
        </li>
    <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">HTC <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">HTC Desire</a></li>
            <li><a href="#">HTC Desire HD</a></li>
            <li><a href="#">HTC One</a></li>
            <li class="divider"></li>
            <li><a href="#">HTC One M8</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
       </div>


    </header>

    </head>
    <body>


     <h1 class="cases-of-the-week"><center>Cases Of The Week</center></h1>
      <div class="container-row">
      <div class="row">
          <div class="col-sm-4 col-xs-12">
          <div class="panel ">
  <div class="panel-heading"><center>iPhone Case</center></div>
  <div class="panel-body ">
  <div class="iPhone-Case-1">  
  <img src="iPhone-Case-Of-The-Week.png"width="260" height="290" /></div>
  <b><u><center>XTREME iPhone Case (iPhone 5/5s Case)</center></u></b>
  It may look like fluorescent armour, but that’s because it kinda is. The XTREME iPhone Case is packed with Reactive Protection Technology, made of XRD foam which stiffens on impact and absorbs 90% of the impact. There’s also a rigid outer polycarbonate shell and an inner shock-absorbing TPE insert, which combine to make this one of the safest havens for your iPhone 5s on the planet.

  </div>
</div>
          </div>
          <div class="col-sm-4 col-xs-6"><div class="panel ">
  <div class="panel-heading"><center>Samsung Case</center></div>
  <div class="panel-body ">
   <div class="Samsung-Case-1">
   <img src="Samsung-Case-Of-The-Week.png" width="260" height="290" /></div> 
  <b><u><center>Spigen SGP Slim Armour Case (Samsung Galaxy S4 Case)</center></u></b>
  The Slim Armour case for the Samsung Galaxy S4 has been specifically designed and crafted to offer amazing protection despite being incredibly slim and beautiful in appearance. The TPU case features improved shock absorption on the top, bottom and corners to effectively protect the Galaxy against external impact.      


  </div>
</div></div>
          <div class="col-sm-4 col-xs-6"><div class="panel ">
  <div class="panel-heading"><center>HTC Case</center></div>
  <div class="panel-body ">
   <div class="HTC-Case-1">
   <img src="HTC-Case-Of-The-Week.png"width="260" height="290" /></div> 
  <b><u><center>Tough HTC One Case (HTC One Case)</center></u></b>
You know the feeling. The heartbreak that immediately sets in as your phone smashes to the ground. Flashes of panic, pools of sweat and buckets of tears overwhelm your body. Protect yourself from future stress with the Tough case, providing dual layers of protection. Built to withstand sudden drops and accidental falls, the Tough case for the HTC One is the epitome of protection.


  </div>
         </div>

      </div>
        </div>


    <footer><center>CASES4U Inc</center></footer>



     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>      
   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>           
    </body>



</html>

我最近开始使用bootstrap并且进展顺利。我正在学习很多，我开始使用他们的导航栏。我使用它，它进展顺利我甚至做了一个快速的手机外壳网站一切顺利。直到我查看我的文件并看到我的网站已更改。我不明白一天前它很好，我没有触及任何东西。 What website looks like now

Answer 1

<header class="navbar">中有<head>，将其移至<body>。

Answer 2

<header class="navbar"> </header>应该进入<body> </body>

确保您在<div> </div>

中有匹配的<body> </body>个标记对

使用<!DOCTYPE html>

Bootstrap NavBar停止工作

2 个答案: