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

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

Class 下拉菜单有一个 min-width 属性。
最小宽度:10rem;.

只需用.
覆盖它最小宽度:1rem;