Question

使用Bootstrap创建菜单栏。我的品牌标签左对齐。主菜单选项是居中对齐的。我正试着赶快退出＆＃39;要正确对齐。但相反，它在第二行并且居中。

<style>
body {
    background-color: White;
    margin-left: 40px;
    margin-right: 40px;
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}

.navbar .navbar-collapse {
    text-align: center;
}

.navbar .navbar-right {
    text-align: right;
    display: inline-block;
    float: none;
    vertical-align: top;
}
</style>

<body id=<?php echo $bodyid ?>>

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
    <a class="navbar-brand">Assessment Manager</a>
</div>

<div class="collapse navbar-collapse">
    <div class="container">
        <ul class="nav navbar-nav">
            <li><a href="../public/home.php">Home</a></li>
            <li><a href="../public/clients.php">Clients</a></li>
            <li><a href="../public/contacts.php">Contacts</a></li>
            <li><a href="../public/employees.php">Employees</a></li>
            <li><a href="../public/findings.php">Findings</a></li>
            <li><a href="../public/projects.php">Projects</a></li>

            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Vulnerabilities<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="../public/hostvulns.php">Host</a></li>
                    <li><a href="../public/webvulns.php">Web</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <a href="../public/logout.php"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
            </li>
        </ul>
    </div>

</div>

See a picture of the menu bar here.

Answer 1

将<ul>元素放在同一个容器中。您还有一个未在HTML中使用的CSS类navbar-right。考虑到足够广泛的浏览器窗口，这个HTML似乎工作得很好：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
    <a class="navbar-brand">Assessment Manager</a>
</div>

<div class="collapse navbar-collapse">
    <div class="container">
        <ul class="nav navbar-nav">
            <li><a href="../public/home.php">Home</a></li>
            <li><a href="../public/clients.php">Clients</a></li>
            <li><a href="../public/contacts.php">Contacts</a></li>
            <li><a href="../public/employees.php">Employees</a></li>
            <li><a href="../public/findings.php">Findings</a></li>
            <li><a href="../public/projects.php">Projects</a></li>

            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Vulnerabilities<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="../public/hostvulns.php">Host</a></li>
                    <li><a href="../public/webvulns.php">Web</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="../public/logout.php"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
            </li>
        </ul>
    </div>
</div>
</div>

您还可以在float:right;上试用<ul>作为您的登录链接（使用相同的navbar-right类。

另外，请记住，引导程序要求容器类在其中包含row和col类以进一步包装内容。通过仅使用container，您错过了许多响应行为，而bootstrap旨在提供。

导航栏元素下降到第二行而不是右对齐

1 个答案: