Bootstrap导航栏折叠时搜索框占满全宽且不影响展开态的实现问题

代码修改 #

你无需调整现有HTML结构，只需要在你的CSS文件中添加如下代码即可：

/* 仅匹配Bootstrap lg断点以下，也就是导航栏折叠的场景 */
@media (max-width: 991.98px) {
  /* 让搜索表单占满整行宽度，允许子元素换行 */
  .navbar .form-inline {
    width: 100%;
    flex-wrap: wrap;
  }
  /* 搜索框占满全宽，调整边距和按钮隔开 */
  .navbar .form-inline .form-control {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0.5rem;
  }
  /* 提交按钮也占满全宽，视觉更统一 */
  .navbar .form-inline .btn {
    width: 100%;
  }
}

你之前给搜索框设置的min-width属性可以保留，不会和上述代码冲突。

• 你使用的navbar-expand-lg类的生效断点为992px：屏幕宽度≥992px时导航栏展开，<992px时导航栏折叠。上述媒体查询精准匹配了导航栏折叠的场景，所有样式只会在折叠状态下生效，完全不会影响大屏幕的原有显示效果。
• 原有form-inline类默认设置了flex-wrap: nowrap，强制所有子元素在同一行排列，所以你单独给搜索框加width:100%不会生效。将该属性改为flex-wrap: wrap允许换行后，给输入框设置的100%宽度才会生效，自然就能占满全宽。
• 所有样式都添加了.navbar前缀限制作用域，不会影响页面其他位置的表单、输入框样式。

内容的提问来源于stack exchange，提问作者Fernando Velasco Borea