Question

在这里跟我说：

我有一行有三列2-8-2，其中我想将导航栏放在固定在页面顶部的中心列中。页面的内容需要与导航栏的宽度相匹配，这就是我尝试尝试此操作的原因。

有意义吗？

以下是请求的代码，但不起作用。想象一下，描述基本设置会更简单但是......

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/site-design.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
  </head>
  <body style="padding-top: 70px">
  <div class="container">
<div class="row">
      <div class="col-lg-2" style="width:20%"></div>
      <div class="col-lg-8">

        <nav class="navbar navbar-default navbar-fixed-top">
              <div class="container-fluid ">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1"><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="#"><img src="img/NYH Banner.jpg" width="210" height="44" alt=""/></a></div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="topFixedNavbar1">
                  <ul class="nav navbar-nav">
                        <li><a href="#">Welcome</a></li>
                        <li><a href="#">Understand Hypnotherapy</a></li>
                        <li><a href="#">About</a></li>
                        <li class="dropdown">
                          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
                          <span class="caret"></span></a>
                          <ul class="dropdown-menu">
                            <li><a href="#">Online Hypnotherapy</a></li> 
                            <li><a href="#">Learn Hypnotherapy</a></li>
                            <li><a href="#">Self Hypnosis</a></li>
                          </ul>
                        </li>
                        <li><a href="#">Reviews</a></li>        
                        <li><a href="#">FAQs</a></li> 
                        <li><a href="#">Locate</a></li>
                        <li><a href="#">Contact</a></li>
                  </ul>


                </div>
                <!-- /.navbar-collapse -->
          </div>
              <!-- /.container-fluid -->
        </nav>
      </div>
      <div class="col-lg-2" style="width:20%"></div>
    </div>
</div>







    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-1.11.2.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script>
  </body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */

.navbar
        {
            background-color: #ffffff;
        }

.navbar-brand, .navbar-nav 
        {
            line-height: 54px;
            height: 54px;
            padding-top: 0;
            background-color:transparent;
        }

在列中安装导航栏

0 个答案: