Question

我的网站编码经验有限。我正在尝试将bootstrap实现到我的网站中，特别是通过使用它创建一个导航栏。它工作得很好，除了当我点击下拉菜单的登录按钮时，菜单对于内容来说太宽了。我使用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样式规则并删除它们 - 所以在包装表单的div上只有bootstrap CSS +加上这个内联样式规则style="padding: 10px;"
所以基本上
- 删除您的样式规则
- 请输入以下代码
- 更改代码内容

你应该去吧！

<!-- 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

“类”下拉菜单具有min-width属性。
min-width: 10rem;。

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

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

2 个答案:

我的版本如何运作？