Question

我有一个使用Boostrap 3的功能性narbar菜单。

我想在此处更改“登录”和“注册按钮”的位置，现在位于右侧菜单中心（水平方向）。

我一直在阅读很多SO帖子，但他们通常只解释如何全局集中标题的所有元素，或者我无法将他们所说的内容应用于我的特定情况。

你能告诉我在下面的代码中要改变什么来使这个工作吗？

以下是代码：

HTML

<header>
        <div class = "navbar navbar-default 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>

            <a class="navbar-brand" href="/">My App</a>

      </div>

            <div class="navbar-collapse collapse">
                <nav role="navigation">
                    <!-- Navigation with change according to user role -->

                    <ul class="nav navbar-nav navbar-right">

                      <!--  Links for signed-in users -->
                        <li class="non-btn-menu">
                          <a href="/signin">login</a>
                        </li>
                        <li>
                            <a class="framed" href="/signup">Sign up Free</a>
                        </li>

                      <li class="non-btn-menu hidden-xs"><a href="/about">Cool, you need explanations?</a></li>

                      <li class="non-btn-menu visible-xs"><a href="/about">test</a></li>                 

                      <li class="dropdown non-btn-menu" id="fat-menu">
                        <a href="javascript:void(0)" class="dropdown-toggle hidden-xs" data-toggle="dropdown">
                          <i class="fa fa-bars fa-lg"></i> 
                        </a>
                        <ul class="dropdown-menu">
                          <li role="presentation" class="dropdown-header">About Us</li>
                          <li><a href="#">Team</a></li>        
                          <li><a href="#">Press</a></li>  

                        </ul>
                      </li>

                    </ul>

                </nav>
            </div><!--/.nav-collapse -->

        </div>
    </div>
</header>

CSS：

.navbar {
  margin-bottom: 0px;
 }

.navbar-brand {
    font-size     : 2.4em;
    letter-spacing: -4px;
    padding             :   15px 45px;
    @media (max-width: 768px) {
        padding: 15px 25px;
    }
}

.navbar-nav {
  margin: 0px;
}


.navbar-default {
    background   : none repeat scroll 0 0 black;
    border-bottom: 0 none;
    filter       : none;
    padding-right: 5px;
}

.navbar-default .navbar-brand {
    color         : white;
    &:hover             { color: white;}
}

以下是代码：http://www.bootply.com/3yzojgyQdj#

谢谢！

Answer 1

删除

<li class="non-btn-menu">
    <a href="/signin">login</a>
</li>
<li>
    <a class="framed" href="/signup">Sign up Free</a>
</li>

来自

<ul class="nav navbar-nav navbar-right">

并将它们放在合理的导航栏中，然后再显示：

<ul class="nav navbar-nav navbar-justified">
    <li class="non-btn-menu">
        <a href="/signin">login</a>
    </li>
    <li>
        <a class="framed" href="/signup">Sign up Free</a>
    </li>
</ul>

LE：我把它添加到你的CSS中：

.navbar-collapse {
    float: right;
}
.navbar-default .container {
    text-align: center;
}
.navbar-justified {
    float: none; 
    display: inline-block;
}

Bootply

仅限于bootstrap上的特定文本/按钮＆＃34;导航栏菜单

1 个答案: