Html 如何调整引导下拉菜单以适应内容？

我有有限的网站编码经验。我正试图在我的站点中实现引导，特别是用它创建一个导航栏。这是伟大的工作，除了当我点击下拉菜单的登录按钮，菜单显示太宽的内容。我使用css样式表将用户名和密码表单对齐到下拉菜单的右侧，但是表单左侧仍然有太多的空白

例如，我更愿意将它缩减到“新闻通讯”按钮的开头

可在以下位置找到网站：

代码：

用户名：
密码：
提交

以下是如何将引导菜单修复为内容的解决方案

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

我的版本如何工作？

• 通过以最小的方式更改引导，我的版本可以在全宽和移动环境下工作（就我测试的情况而言）
• 此外，我还看到了您的CSS样式规则并删除了它们-因此实际上只有引导CSS+加上包装表单的div上的内联样式规则

  style=“padding:10px；”

• 所以基本上
  • 删除样式规则
  • 输入下面的代码
  • 更改代码的内容

你应该走了

---

这是一个正在运行的演示-

类下拉菜单具有最小宽度属性。

最小宽度：10rem

只需将其覆盖。

最小宽度：1rem

试试set.container{width:100%；}非常感谢您快速而有用的回复。这绝对有效！当我添加自己的css层时，我甚至没有想到手机版本会是什么样子，我感到绝望了。。。。我用谷歌chrome浏览器进行了测试。我用iPhone3GS布局测试了响应性，但效果不太好：/上面的示例代码中有一个错误的缺少标签结尾的div w/填充，仅供参考。它在演示中被更正。
            <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>