带有居中徽标的多行导航栏答案

【问题标题】：Multi row navigation bar with centered logo带有居中徽标的多行导航栏
【发布时间】：2016-10-03 08:10:32
【问题描述】：

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

我想完成这样的事情：

这是我的代码：

<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/

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

【问题讨论】：

你能创建一个工作的 jsfiddle 或代码 sn-p 以便我们重现你的问题吗？
抱歉，新手。已添加链接。

标签： html css asp.net twitter-bootstrap

【解决方案1】：

参见下面的 sn-p 或 jsfiddle -> 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>

【讨论】：

您的解决方案似乎解决了中心问题的徽标，但我仍然希望“关于我们”、“联系方式”、“注册”和“登录”链接成为其中的一部分如图所示的导航栏。不过感谢您的意见！
@rhedin 所以你想要这样的东西吗？ jsfiddle.net/oc88hnLL/4
啊，是的，现在我们正在谈论。还有一个问题，如果没有第二个
，这可能吗？可以只用一个吗？
就是这样！非常感谢