Question

我正在使用bootstrap 3进行fiddlin'。我正在尝试制作一个水平导航栏，除了它不会横向移动。我认为导航栏应该是开箱即用的水平，我是否需要一些额外的CSS？

我尝试使用这样的导航文档制作导航栏复制代码：

<div class="row">
    <div class="col-12">            
        <div class="navbar">
          <div class="navbar-inner">
            <a class="brand" href="#">Title</a>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
            </ul>
          </div>
        </div> 
    </div>
</div>

http://jsfiddle.net/FxkZT/

Answer 1

DEMO

您的代码适用于BootStrap 2，需要更改。在bootstrap 3中：

<a class="brand" href="#">Title</a>变为<a class="navbar-brand" href="#">Title</a>
<ul class="nav">变为<ul class="nav navbar-nav">
不再需要<div class="navbar-inner">

文档here中的更多信息。

Answer 2

http://jsfiddle.net/FxkZT/5/

我刚刚添加了一点CSS，检查一下，让我知道它是否适合你：

CSS：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* Internet Explorer 7 compatibility */
    *zoom:1;
    vertical-align: top;
}

HTML：

<div class="row">
    <div class="col-12">
        <div class="navbar">
          <div class="navbar-inner">
            <a class="brand" href="#">Title</a>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
            </ul>
          </div>
        </div>


    </div>
</div>

Twitter Bootstrap 3 - Navbar不是水平的

2 个答案: