css - 导航栏不会停留在页面顶部的水平线上

Question

我知道已经有很多关于类似主题的问题，但我尝试了内联 block 和各种 Bootstrap 导航栏类，以使我的导航栏中的按钮保持在水平线上。

<header class= "navbar navbar-inverse">
<div class= "container navbar-header">
  <div> <%= link_to "ZBLOG", "#", class: "btn btn-lg btn-primary pull-left", id: "logo" %></div>
  <ul class= "">
    <li><%= link_to "Home", "#", class: "btn-lg btn-primary navbutton" %>></li>
    <li><%= link_to "Articles", "#", class: "btn-lg btn-primary navbutton" %>></li>
    <li><%= link_to "Contact Me", "#", class: "btn-lg btn-primary navbutton" %>></li>
    <li><%= link_to "Button", "#", class: "btn-lg btn-primary navbutton" %>></li>
  </ul>
</div>

看起来应该像您期望的那样将这些按钮简单地排在一行的顶部。相反，他们出于某种原因正在下楼梯 .无论如何，任何帮助都会很棒。多谢你们。

Answer 1

试过这个..？？

<nav class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav">
           <li>
                <p class="navbar-btn">
                    <a href="#" class="btn btn-default">I'm a link button!</a>
                </p>
            </li>
            <li>
                <button class="btn btn-default navbar-btn" type="button">I'm a form button!</button>
            </li>
        </ul>
    </div>
</nav>

希望这对您有所帮助....