html - 创建像 thenextweb.com 这样的 Bootstrap 用户菜单

Question

我想创建一个用户菜单，如下所示:

当我使用 bootstrap 创建这样的菜单时，它的全宽没有在按钮下方对齐。所以它看起来像这样:

那么我如何使用 Bootstrap 创建这样的菜单呢？

Answer 1

我不敢相信我要写的东西，但你不能假设人们知道你的源代码，你必须分享你所做的。当您共享代码时，社区会很乐意提供帮助。您可以阅读这非常重要:How do I ask a good question? .别以为我是个自以为无所不知的人，你应该看看我的名声，一开始我问了很多和你问的类似的问题。

关于你的问题。这article可以提供很多帮助。我正在分享一个关于它的外观的小演示。演示:http://jsbin.com/figak/1设计和一切都很丑陋，但它有你想要的。

这基本上是我添加的内容。导航栏右侧的表单。希望对您有所帮助。

 <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
              <input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
              <input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
              <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
              <label class="string optional" for="user_remember_me"> Remember me</label>

              <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
           </form>
          </ul>
        </li>
      </ul>