Question

是否可以在引导程序中使用多行导航栏而不使用两个导航栏？

我想完成这样的事情：

这是我的代码：

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Logo", "Index", "Home", new { area = "" }, new { @class = "navbar-brand custom-li" } )
            </div>
        </div>
    </div>
    <div class="navbar">
        <div class="container">
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink( "About us", "About", "Home" )</li>
                    <li>@Html.ActionLink( "Contact", "Contact", "Home" )</li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>@Html.ActionLink("Sign up", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" } )</li>
                    <li>@Html.ActionLink("Login", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" } )</li>
                </ul>
            </div>
        </div>
    </div>
</body>

这是JSFiddle：https://jsfiddle.net/oc88hnLL/2/

此外，我的解决方案在折叠时不起作用。当窗口变得太小时，徽标向左移动并且不会保持居中。

Answer 1

请参阅下面的代码段或jsfiddle - ＆gt; jsfiddle

要使你的引导工作，请确保在<head>部分中包含jQuery。

让我知道这是否是您正在寻找的

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.navbar-fixed-top {
    background-color: #FFF;
}

.navbar-fixed-top,
.navbar-fixed-bottom {
    border-top-width: 0px;
    border-bottom-width: 0px;
}

.navbar-header {
  float:left;
  width:100%;
  text-align:center;
}
   
ul.navbar-nav > li { 
display:inline;
}
ul.navbar-nav{
   float: none;
   margin: 0 auto;
   text-align:center;
   display:table;
}
.logo {
  text-align:center;
}


.content { min-height:1000px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<!DOCTYPE html>
<body>
    <div class="navbar navbar-white navbar-inverse navbar-fixed-top">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="logo" href="">Logo</a>
            </div>
      
  
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="">About us</a></li>
                    <li><a href="">Contact</a></li>
                    <li><a href="">Register</a></li>
                    <li><a href="">Login</a></li>
                </ul>
            </div>
        </div>

    
</body>

带有居中徽标的多排导航栏

1 个答案: