如何修改Bootstrap导航栏内联搜索框宽度以完整显示占位符

问题原因 #

Bootstrap4的行内表单（form-inline）中，form-control类的输入框默认宽度为自动，且带有默认的最大宽度限制，因此长占位符无法完全显示。

可行解决方案 #

方案1：使用内置宽度工具类（最简单，无需额外CSS）

直接给搜索输入框添加Bootstrap自带的宽度工具类，可选值包括w-25/w-50/w-75/w-100（对应25%/50%/75%/100%父容器宽度），或者w-auto自适应内容宽度。
修改后的输入框代码示例：

<input class="form-control mr-sm-2 w-75" type="search" placeholder="This is a quite long placeholder">

原理：Bootstrap宽度工具类优先级高于默认的form-control宽度设置，可直接覆盖原样式生效。

方案2：弹性布局自适应宽度（推荐，响应式效果最好）

让搜索框自动占满导航栏剩余可用空间，适配不同屏幕尺寸无需手动调整宽度：

1. 给外层form标签添加d-flex flex-grow-1类，让表单容器占满导航栏右侧剩余空间
2. 给输入框添加flex-grow-1类，让输入框占满表单容器的可用宽度
   修改后的代码片段：

<form class="form-inline my-2 my-lg-0 d-flex flex-grow-1">
  <input class="form-control mr-sm-2 flex-grow-1" type="search" placeholder="This is a quite long placeholder">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

原理：Bootstrap4导航栏默认采用Flex布局，flex-grow-1属性会让元素在父Flex容器中分配剩余空间时占满所有可用位置，适配不同屏幕尺寸时都会自动调整宽度，不会出现小屏溢出、大屏过窄的问题。

方案3：自定义CSS固定宽度

如果需要精确控制宽度，可以自定义样式覆盖默认设置：

<!-- 给输入框加自定义类 -->
<input class="form-control mr-sm-2 search-input" type="search" placeholder="This is a quite long placeholder">

/* 自定义CSS样式 */
.search-input {
  width: 300px; /* 按需调整宽度数值 */
}
/* 小屏适配可加媒体查询 */
@media (max-width: 992px) {
  .search-input {
    width: 100%;
  }
}

原理：自定义CSS优先级高于Bootstrap默认样式，可直接覆盖输入框的宽度规则。

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