导航栏不会以Bootstrap 3

时间：2016-07-15 03:44:12

标签： html5 twitter-bootstrap css3

我很抱歉提出这个问题，但我已经搜索了几周的堆栈溢出并且无法纠正我的问题。我的导航栏是左对齐的;我需要它以中心。我试过申请保证金：0px auto;到<nav>层次结构中的每个元素以及text-align：center;但没有什么是它的中心。

这是一个Bootstrap 3框架。除了bootstrap.min.css文件之外，还有代码和我的外部CSS：

.navbar {
  margin-bottom: 0;
  border-radius: 0;
}
.row.content {
  height: 450px
}
.sidenav {
  padding-top: 20px;
  background-color: #f1f1f1;
  height: 100%;
}
footer {
  background-color: #555;
  color: white;
  padding: 15px;
  font-family: "IM Fell DW Pica", serif;
  font-size: 18px;
}
@media screen and (max-width: 767px) {
  .sidenav {
    height: auto;
    padding: 15px;
  }
  .row.content {
    height: auto;
  }
}
#banner-img {
  margin: 0px auto;
}
header {
  background-color: #394650;
  /* background color of header */
}
nav {
  font-family: "IM Fell DW Pica", serif;
  /* font style of nav bar */
  font-size: 23px;
  /* font size of nav bar */
}
#myNavBar ul li {
  text-align: center;
}
/* FOR SMALL SCREENS */

@media screen and (max-width: 767px) {
  nav {
    font-size: 40px;
    /* changes font size on smaller screens */
  }
  /* sets dimensions for embedded video on small screens */
  #intro-video-div {
    height: auto;
    width: auto;
  }
  section h1 {
    font-size: 40px;
  }
  section p {
    font-size: 25px;
  }
}
/* FOR BIG SCREENS */

@media screen and (min-width: 768px) {
  /* sets dimensions for embedded video on larger screens */
  #intro-video-div {
    width: 560px;
    height: 315px;
  }
  section h1 {
    font-size: 36px;
  }
  section p {
    font-size: 20px;
  }
  #content-ads-holding-div {
    height: 750px;
  }
  .img-responsive {
    margin: auto;
  }
}
section,
h1,
p {
  font-family: "IM Fell DW Pica", serif;
  text-align: center;
  position: static;
}
#intro-video-div {
  margin: 0px auto;
  position: static;
  text-align: center;
}
#intro-video {
  width: 100%;
  height: 100%;
}
#nav-div-center,
#nav-ul {
  margin: 0px auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
  <div class="container-fluid" id="navbar-container">
    <div class="collapse navbar-collapse" id="myNavbar">
      <div id="nav-div-center">
        <ul class="nav navbar-nav" id="nav-ul">
          <li class="active" id="home">Home</li>
          <li id="episodes">Episodes</li>
          <li id="research">Research</li>
          <li id="store">Store</li>
          <li id="support">Support</li>
          <li id="communicate">Communicate</li>
          <li id="affiliations">Affiliations</li>
        </ul>
      </div>
    </div>
  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

您可以在http://www.kspavia.com/bootstrap.php

查看实际网站

5 个答案:

答案 0 :(得分：0)

如果要使导航居中，则需要指定宽度。块级元素将始终扩展到尽可能宽的范围。

#nav-ul {
  max-width: 780px;
}

答案 1 :(得分：0)

尝试使用以下css制作导航栏中心。

@media (min-width: 768px){ 
  .navbar-nav{
      margin: 0 auto;
      float: none;
      display: table;
  }
}

答案 2 :(得分：0)

根据您最终想要做的事情（证明nav中nav或.navbar.navbar-inverse { margin-bottom: 0; font-family: "IM Fell DW Pica", serif; font-size: 22px; } /*Distributed Links Starts*/ @media (min-width: 768px) { .navbar.navbar-inverse .navbar-nav { display: table; width: 100%; } .navbar.navbar-inverse .navbar-nav > li { display: table-cell; float: none; } .navbar.navbar-inverse .navbar-nav > li > a { text-align: center; } .navbar.navbar-inverse > .container-fluid { margin-right: 0; margin-left: 0; padding-left: 0; padding-right: 0; } } /*Distributed Links Ends*/ @media screen and (max-width: 767px) { .navbar.navbar-inverse .navbar-nav > li > a { font-size: 40px; padding: 20px 15px; } }中链接中心的链接，您必须更改显示和浮动属性。< / p>

注意：我将字体大小调整到768px以上，以防止任何链接在缩小的视口上溢出。

以下是两个工作示例。 在FullPage上查看。

分布式（合理）链接示例：

＆＃13;
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active" id="home"><a href="#">Home</a>
        </li>
        <li id="episodes"><a href="#">Episodes</a>
        </li>
        <li id="research"><a href="#">Research</a>
        </li>
        <li id="store"><a href="#">Store</a>
        </li>
        <li id="support"><a href="#">Support</a>
        </li>
        <li id="communicate"><a href="#">Communicate</a>
        </li>
        <li id="affiliations"><a href="#">Affiliations</a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
＆＃13; 
.navbar.navbar-inverse {
  margin-bottom: 0;
  font-family: "IM Fell DW Pica", serif;
  font-size: 18px;
}
/*Centered Links Starts*/

@media (min-width: 768px) {
  .navbar.navbar-inverse .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar.navbar-inverse .navbar-nav > li {
    display: inline-block;
    float: none;
  }
}
/*Centered Links Ends*/

@media screen and (max-width: 767px) {
  .navbar.navbar-inverse .navbar-nav > li > a {
    font-size: 40px;
    padding: 20px 15px;
  }
}
＆＃13;
＆＃13;
＆＃13;

中心链接示例：

＆＃13;
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active" id="home"><a href="#">Home</a>
        </li>
        <li id="episodes"><a href="#">Episodes</a>
        </li>
        <li id="research"><a href="#">Research</a>
        </li>
        <li id="store"><a href="#">Store</a>
        </li>
        <li id="support"><a href="#">Support</a>
        </li>
        <li id="communicate"><a href="#">Communicate</a>
        </li>
        <li id="affiliations"><a href="#">Affiliations</a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
＆＃13; 
mockObj.expects('method').withArgs(sinon.match.func)
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

如果您想使导航中心对齐。只需更新现有的css second-bootstrap-stylesheet.css 行号 119 ，如下css： - 

#nav-div-center, #nav-ul {
   width: 78%;
   float: none;
}

答案 4 :(得分：0)

如果您希望self.yourView.customBackgroundColor = NSColor.lightGrayColor() 块位于中心或使用应用样式，则可以使用.container代替.container-fluid：

.navbar
相关问题
最新问题