创建像neweweb.com这样的bootstrap用户菜单

Question

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

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

那我怎么能用bootstrap创建这样一个菜单呢？

Answer 1

对于这种情况，

Bootstrap是不够的。虽然它真的很棒的框架，但它不会为你做任何事情。我的建议是阅读有关javascript和客户端的DOM操作。

在您的情况下，我将创建包含表单的特殊容器。然后将bootstrap的类hide添加到其中，以便它不会在开始时显示，并将某些操作（click或hover）绑定到应触发菜单显示的图标。

我建议使用jQuery

Answer 2

我无法相信我要写的内容，但你不能假设人们知道你的源代码，你必须分享你做过的事情。当您分享代码时，社区将随时为您提供帮助。你可以读到这是非常重要的：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>

Answer 3

我与基金会合作，从不使用Bootstrap，但如果其他所有方法都失败了，你可以将其置于绝对位置：

.menu { position: absolute; top: 40px; left: 40px; width: 300px; }

...或者你可以保持相对位置（假设它是什么）：

.menu { position: relative; width: 300px; margin-left: 40px; }

将.menu更改为实际的类，并且你很高兴，你可能必须覆盖一些函数。如果仍在应用引导类，则可以将!important添加到类的末尾，如width: 300px !important;，它将起作用。请记住，这应该是最后的手段。

您可以在任何新浏览器中“检查元素”以查看引导程序使用的代码，然后在您的css文件中覆盖这些类。

您可以使用媒体查询在小屏幕上将宽度保持在100％，但在大于400px的屏幕上将其设置为300px，如下所示：

@media only screen and (min-width: 400px) {
    .menu { position: relative; width: 300px; margin-left: 40px; }
}

希望这有帮助！