Fatal编程技术网

Twitter bootstrap 在柱内安装导航栏

twitter-bootstrap layout

Twitter bootstrap 在柱内安装导航栏,twitter-bootstrap,layout,navbar,Twitter Bootstrap,Layout,Navbar,请耐心听我说： 我有一行有三列2-8-2，我想把导航栏放在固定在页面顶部的中间列。页面的内容需要与导航栏的宽度相匹配，这就是我尝试这样做的原因 有道理吗 这是请求的不起作用的代码。我想描述一个基本的设置会更简单，但是 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" conten

请耐心听我说：

我有一行有三列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>
我不认为你能在8列中容纳一个210px的图像和所有这些链接；即使使用标准导航栏，在视口更改时，导航链接也会被推到导航栏下方。导航边缘需要匹配的实际内容宽度是多少？这是我想的，但客户端是。。。对事情很难。他最初的网站是大约6年前在iWeb上建立的，他对所有的东西都进行了精确的布局。我目前正在向他学习响应性设计和流体布局。谢天谢地，他是我的好朋友，所以我不能这么客气地告诉他他的。。。思想的僵化。礼貌地说。英雄联盟 
@charset "utf-8";
/* CSS Document */

.navbar
        {
            background-color: #ffffff;
        }

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