如何调整Bootstrap col-md-12容器内右侧带图标的搜索输入框宽度

解决方案 #

只需要修改两处CSS属性即可实现搜索框占满整行宽度的效果，无需调整HTML结构：

• 给.form类新增width: 100%属性，让表单容器先占满外层col-md-12的全部可用宽度
• 将.search-field类的width: auto替换为flex: 1，让输入框自动填充flex容器的剩余空间

修改后的完整CSS代码如下：

.form {
  margin-top: 8px;
  margin-left: 13px;
  display: flex;
  flex-direction: row;
  width: 100%; /* 新增属性 */
}

.search-field {
  padding: 10px 35px 10px 15px;
  color: #fff;
  border-color: #d4e0e0;
  border-radius: 15px;
  outline: none;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 3px 6px #0000000D;
  border: 1px solid #D4E0E0;
  flex: 1; /* 替换原有width: auto */
  color: #000;
}

.search-button {
  z-index: 1;
  float: inline-end;
  background: transparent;
  border: none;
  outline: none;
  margin-top: -2px;
  margin-left: -45px;
}

.search-button img {
  width: 20px;
  height: 20px;
  object-fit: cover;
}

你原本设置的搜索按钮margin-left: -45px和输入框padding-right: 35px刚好适配，调整宽度后图标会正常显示在输入框右侧，不需要额外修改其他参数。

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