如何修剪 Bootstrap 下拉菜单以适应内容？

Question

我的网站编码经验有限。我正在尝试在我的网站中实现引导程序，特别是通过使用它创建一个导航栏。它工作得很好，除了当我舔下拉菜单的登录按钮时，菜单对于内容来说显得太宽了。我使用 css 样式表将用户名和密码表单对齐到下拉菜单的右侧，但表单左侧仍有太多空白。

例如，我宁愿将它修剪到“新闻通讯”按钮的开头。

可以在这里找到网站：my_test_site

代码：

            <li><a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Login <b class = "caret"></b></a>
                <div class = "dropdown-menu dropdown-menu-right">
                    <div class="container">
                        <form class="form-inline" role="form" id="username">
                                <div class="form-group">
                                    <label for="username">Username:</label>
                                    <input type="username" class="form-control" id="email" placeholder="username">
                                </div>
                                <div class="form-group" id="password">
                                    <label for="pwd">Password:</label>
                                    <input type="password" class="form-control" id="pwd" placeholder="password">
                                </div>
                                <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div>
                </div>
            </li>
        </ul>

Answer 1

这是如何将引导菜单修复到内容中问题的解决方案？

它不使用单行格式并根据要求专门减少空格，原因如下：
即使您减小了包含登录表单的下拉面板的宽度，该表单也无法在移动视图中正确呈现，例如如果您在my_test_site 演示中将浏览器缩小到移动大小，然后尝试使用表单，您就会明白我的意思。

我的版本如何工作？

• 通过以最小的方式更改引导程序，我的版本可以在全宽和移动设备上运行（目前我已经测试过了）
• 另外，我看到了您的 CSS 样式规则并删除了它们 - 所以实际上只有引导 CSS + 加上这个内联样式规则 style="padding: 10px;" 在包装您的表单的 div 上
• 所以基本上
  • 删除您的样式规则
  • 放入下面的代码
  • 更改代码内容

你该走了！

<!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <!-- Begin custom dropdown menu -->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">
            <li>
              <!-- begin custom form -->
              <div style="padding: 10px;"
              <form class="form-inline" role="form" id="username">
                <div class="form-group">
                  <label for="username">Username:</label>
                  <input type="username" class="form-control" id="email"
                         placeholder="username">
                </div>
                <div class="form-group" id="password">
                  <label for="pwd">Password:</label>
                  <input type="password" class="form-control" id="pwd" placeholder="password">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
              </div>
              <!-- end custom form -->
            </li>
          </ul>
        </li>

        <!-- Begin custom dropdown menu -->
      </ul>

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

这是一个工作 demo - http://jsbin.com/lineketuru/1/edit?html,output

Answer 2

Class 下拉菜单有一个 min-width 属性。
min-width: 10rem;。

只需覆盖它。
min-width: 1rem;