Bootstrap输入框宽度过小：修改用户名密码输入框宽度无效

嘿，我来帮你搞定这个输入框宽度调不动的问题！从你给出的代码片段来看，大概率是Bootstrap的默认样式或者布局类的优先级在搞鬼，咱们一步步来解决：

1. 先排查布局类的问题 #

你用了col-xs-4这个栅格类，但在dropdown-menu里面直接用栅格列可能不太好使——因为dropdown-menu本身有默认的最小宽度（Bootstrap里默认是16rem左右），而且栅格列需要放在row容器里才会正常生效。你现在把form-group放在container里但没加row，这会导致栅格布局完全不起作用。

修改下结构，把form-group放到row容器里试试：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-sign-in"></i> Login
  </a>
  <form class="dropdown-menu p-4 dropdown-menu-right" method="post" action="#">
    {% csrf_token %}
    <div class="container">
      <div class="row"> <!-- 新增row容器，让栅格列生效 -->
        <div class="form-group col-12"> <!-- 改成col-12让输入框占满菜单宽度，也可以换成你需要的宽度类 -->
          <label for="username">用户名</label>
          <input type="text" class="form-control" id="username" name="username">
        </div>
        <div class="form-group col-12">
          <label for="password">密码</label>
          <input type="password" class="form-control" id="password" name="password">
        </div>
      </div>
    </div>
  </form>
</li>

2. 用自定义CSS强制覆盖样式 #

如果改结构还是不行，那就是默认样式的权重更高，咱们写个自定义CSS来强制设置宽度。可以给输入框加个专属类，比如login-input，然后写样式：

/* 直接定位下拉菜单里的输入框，或者用自定义类精准控制 */
.dropdown-menu .form-control.login-input {
  width: 100%; /* 让输入框占满下拉菜单的宽度 */
  /* 也可以设置固定宽度，比如 width: 280px; */
}

然后给输入框加上这个类：

<input type="text" class="form-control login-input" id="username" name="username">

3. 检查是否有其他CSS冲突 #

有时候页面里其他地方的CSS可能会意外覆盖这个样式，你可以打开浏览器的开发者工具（按F12），选中输入框，看看「样式」面板里哪些样式在生效——如果发现有别的样式把宽度覆盖了，就针对性地调整选择器权重（比如加上父元素的类，或者用!important作为最后手段，但尽量少用）。

比如你发现是.dropdown-menu input的样式在搞鬼，就写更具体的选择器：

.nav-item .dropdown-menu .form-control {
  width: 100%;
}

这样调整后应该就能解决宽度不生效的问题啦！

内容的提问来源于stack exchange，提问作者user9527415