如何trim Bootstrap 下拉菜单适合内容？

Question

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

例如，我更希望 trim 到 'newsletters' 按钮的开头。

可在此处找到网站：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

这是如何将bootstrap菜单固定为内容的问题的解决方案？

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

，您就会明白我的意思

我的版本如何工作？

通过以最小的方式更改 bootstrap，我的版本可以在全角和移动设备上运行（无论如何我已经测试过了）
此外，我看到了您的 CSS 样式规则并删除了它们 - 所以实际上只有 bootstrap 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 -->

这是一个有效的演示 - http://jsbin.com/lineketuru/1/edit?html,output

Answer 2

Class dropdown-menu 有一个 min-width 属性。
min-width: 10rem;.

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

如何trim Bootstrap 下拉菜单适合内容？

How to trim Bootstrap dropdown menus to fit contents?

html

css

web

twitter-bootstrap

drop-down-menu

我的版本如何工作？