Bootstrap:如何水平设置导航栏的项目?

时间:2017-01-17 01:19:31

标签: twitter-bootstrap

是的,请有人帮帮我吗... 我正在尝试水平设置导航的菜单项。

这是我的标题:

<meta charset=amp;quot;utf-8amp;quot;>
<meta http-equiv=amp;quot;X-UA-Compatibleamp;quot; content=amp;quot;IE=edgeamp;quot;>
<meta name=amp;quot;viewportamp;quot; content=amp;quot;width=device-width, initial-scale=1amp;quot;>
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

这是我的菜单视图:

<nav class="navbar navbar-default">
  <div class="container-fluid">
   <div class="navbar-header">

   <ul class="nav navbar-nav">
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Inicio <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Opcion 1</a></li>

            <li><a href="#">Opcion 2</a></li>

            <li><a href="#">Opcion 3</a></li>

          </ul>
       </li>
       <li><a href="#">Pagina 2</a></li>

       <li><a href="#">Pagina 3</a></li>

    </ul>
    </div>     
   </div>
</nav>

我正在垂直获取菜单项,但我不希望...只是水平。 请帮帮我

1 个答案:

答案 0 :(得分:1)

enter image description here

  <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <ul class="nav navbar-nav">
                    <li><a href="#">Opcion 1</a></li>
                    <li><a href="#">Opcion 2</a></li>
                    <li><a href="#">Opcion 3</a></li>
                    <li><a href="#">Pagina 2</a></li>
                    <li><a href="#">Pagina 3</a></li>
                </ul>
            </div>
        </div>
    </nav>