Question

我已经在几个项目中使用了Bootstrap的导航类来导航菜单，但是在整天拨打代码之前和之后都没有遇到过这种情况，我似乎无法弄清楚＆＃39 ; s使菜单项中的链接显示在实际菜单项下方。

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
        integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" 
        integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">
    </script>   
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <title>My Page</title>
</head>

<style>
    .topbar {
        background-color: #572700;
        width: 100%;
        /* display: block; */
        height: 45px;
        margin-right: 0px;
        margin-left: 0px;
    }

    .brownbar-text-header {
        color: #FFF;
        font-size: 18px; 
        display: table-cell;
        height: 45px;
        vertical-align: middle;
    }


    header div  .container-fluid  {
        margin-top: 10px;
        margin-left: 0px;
        padding-left: 0px;
        margin-right: 0px;
        padding-right: 0px;
    }

    .brownbar-text-header a {
        color: #FFF;
        font-size: 18px;
    }

    .brownbar-text-header a:hover {
        transition: color 0.1s ease 0s;
        transition-property: color;
        transition-duration: 0.1s;
        transition-timing-function: ease;
        transition-delay: 0s;
        color: #3a9b81;
        opacity: 0.3;
    }
</style>
<body>
<header>
    <div class="row topbar">
        <nav class="navbar">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topbar-nav" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="topbar-nav">
                    <ul class="nav navbar-nav brownbar-text-header">
                        <li>
                        Welcome User <a href="/auth/logout">Logout</a>
                        </li>
                        <li>&nbsp; Some Text Goes Here <a href="#">Link</a></li>
                        <li>&nbsp; Some Text Goes Here <a href="#">Link</a></li>
                        <li>&nbsp; Some Text Goes Here <a href="#">Link</a></li>
                        <li>&nbsp; Some Text Goes Here <a href="#">Link</a></li>

                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
</header>
</body>
</html>

Answer 1

如果我理解你的问题是正确的，我想我找到了解决办法：）

你的李是错的

<li>&nbsp; Some Text Goes Here <a href="#">Link</a></li>

你需要这样做：

<li><a href="#">Some Text Goes Here</a></li>

这是您的jsfiddle updated

此外，如果这是预期的，你的“链接”位于导航栏下方的原因是你在.topbar类45px上放置了一个固定的高度，你可以删除我在jsfiddle中的高度，它会像只要有内容可以显示：）

希望我能帮到你

// Marc Hjorth

Answer 2

列表标签内的文字是包装。把整个东西放在一个跨度内，就像这样：

#!/usr/sbin/dtrace -s

proc:::exec
{
    self->pexecname = execname;
    self->parent_args = (build parent args off curproc here)
}

proc:::exec-success
/ self->pexecname != 0 /
{
    printf( "execname: %s, parent execname: %s", execname, self->pexecname );
    self->pexecname = 0;
    self->parent_args = 0;
}

proc:::exec-failure
/ self->pexecname != 0 /
{
    self->pexecname = 0;
    self->parent_args = 0;
}

bootstrap导航中的链接显示在菜单项下方

2 个答案: