在两行上引导一个值

时间:2014-06-25 23:05:00

标签: twitter-bootstrap asp.net-mvc-4 twitter-bootstrap-3

使用此代码我有一个菜单(我应该有5个条目)在我的例子中我只有3个菜单,而在右边我想要客户端的电子邮件地址+注销,我的问题是电子邮件+注销分为两行,我想在一行上如何将它放在一行

由于

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#page-top">General information</a>
        </div>

        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll">
                    <a href="#services">Client</a>
                </li>
                <li class="page-scroll">
                    <a href="#contact">Sales</a>
                </li>
            </ul>

             <ul class="nav navbar-nav navbar-right">
                <li>
                    @if (Request.IsAuthenticated)
                    {
                        <text>
                        @Html.ActionLink(User.Identity.Name, "Manage", "Account", routeValues: null, htmlAttributes: new { @class = "username", title = "Manage" })
                @using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
                {
                    @Html.AntiForgeryToken()<a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
                }
                        </text>
                    }
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
</body>

1 个答案:

答案 0 :(得分:0)

这样做......只需将动态代码重新插入其中,你应该好好去:

(bootply:http://www.bootply.com/7K3oQkp7El

<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header"><a class="navbar-brand" href="#">General</a>
        <a 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>
        </a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Client</a></li>
          <li><a href="#">Sales</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Manage</a></li>
          <li><a href="#">Log Off</a></li>
        </ul>
      </div>
  </div>
</div>