html – Center Bootstrap Navbar – 不明白为什么导航不会居中

概述我今天刚刚开始学习bootstrap,我正在使用他们在 http://getbootstrap.com/examples/offcanvas/页面上的示例 如您所见,如果您转到该页面,则导航将向左对齐.我试图使用我在普通CSS中所做的事情,这是： margin-right：auto和margin-left：auto 我也试过了 文本对齐：中心 这些都没有用,我已经阅读了他们的导航文档,我不明白我在 我今天刚刚开始学习bootstrap,我正在使用他们在 http://getbootstrap.com/examples/offcanvas/页面上的示例

如您所见,如果您转到该页面,则导航将向左对齐.我试图使用我在普通CSS中所做的事情,这是：

margin-right：auto和margin-left：auto

我也试过了

文本对齐：中心

这些都没有用,我已经阅读了他们的导航文档,我不明白我在这里做的不同之处.

以下是该导航页面的代码.我试图将标签一次性放入所有4个导航容器中：

<div  role="navigation">      <div >        <div  >          <button type="button"  data-toggle="collapse" data-target=".navbar-collapse">            <span >Toggle navigation</span>            <span ></span>            <span ></span>            <span ></span>          </button>          <a  href="#">Project name</a>        </div>        <div  >          <ul >            <li ><a href="#">Home</a></li>            <li><a href="#about">About</a></li>            <li><a href="#contact">Contact</a></li>          </ul>        </div><!-- /.nav-collapse -->      </div><!-- /.container -->    </div>

解决方法 左侧或右侧的bootstrap中只有两个导航方向.要使导航栏居中,有几种方法.这就是我为其中一个人所做的.以下是两个示例链接：

@media (min-wIDth:768px) { /* centered navigation */ .nav.navbar-nav {     float: left; } .nav.navbar-nav {     clear: left;     float: left;     margin: 0;     padding: 0;     position: relative;     left: 50%;     text-align: center; } .nav.navbar-nav > li {     position: relative;     right: 50%; } .nav.navbar-nav li {    text-align: left }}

这是上述的修改版本.我不知道你在做什么徽标.

DEMO 1：http://jsbin.com/iJaJAzIM/3/

http://jsbin.com/iJaJAzIM/3/edit?html,output

这是另一种方法：

@media (min-wIDth:768px) {  .navbar > .container {    text-align: center; } .navbar-header {    float: none;    display: inline-block; } .navbar-brand {    float: none;    display: inline-block; } .navbar .navbar-nav {    float: none;    display: inline-block;    clear: none; } .navbar .navbar-nav > li {    float: none;    display: inline-block; } .navbar .navbar-nav > li li {    text-align: left } /*add ID of centerednav on the collapse or it won't work*/ .collapse.navbar-collapse#centerednav {    float: none;    display: inline-block!important;    wIDth: auto;    clear: none; }}

DEMO 2：http://jsbin.com/iJaJAzIM/6/

http://jsbin.com/iJaJAzIM/6/edit

总结

以上是内存溢出为你收集整理的html – Center Bootstrap Navbar – 不明白为什么导航不会居中全部内容，希望文章能够帮你解决html – Center Bootstrap Navbar – 不明白为什么导航不会居中所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。