如何修改Bootstrap搜索栏宽度？解决被.col-md-10样式覆盖问题

这问题我之前做项目时也踩过坑！Bootstrap的响应式栅格类优先级确实容易抢风头，给你几个实用的解决思路：

1. 提升自定义CSS的优先级（最常用） #

Bootstrap的栅格类（比如.col-md-10）是通过媒体查询+类选择器定义的，只要你的自定义选择器更具体，就能覆盖它的样式。

做法： #

• 给搜索栏的容器加一个自定义类（比如.custom-search-container）
• 写更具体的选择器，或者配合媒体查询精准控制不同屏幕尺寸的宽度

示例代码：

/* 确保你的自定义CSS在Bootstrap CSS之后引入！ */
@media (min-width: 992px) {
  /* 选择器更具体，优先级高于单纯的.col-md-10 */
  .custom-search-container.col-md-10 {
    width: 65%; /* 替换成你想要的宽度 */
  }
}

@media (min-width: 768px) {
  .custom-search-container.col-sm-6 {
    width: 70%;
  }
}

如果实在紧急，也可以用!important强制覆盖，但尽量少用（会增加后期维护难度）：

.col-md-10 {
  width: 65% !important;
}

2. 用预处理器修改Bootstrap变量（适合全局调整） #

如果你的项目用了Sass/LESS这类预处理器，可以直接修改Bootstrap的栅格变量，从根源调整列宽：

Sass示例： #

// 在引入Bootstrap之前修改变量
$grid-columns: 12; // 默认是12列
$col-md-10-width: 65%; // 自定义col-md-10的宽度

// 然后引入Bootstrap
@import "bootstrap";

这种方式适合需要统一修改某类栅格列宽度的场景，不会影响其他组件的样式。

3. 避开Bootstrap栅格类，用自定义布局 #

如果不需要栅格的其他特性，直接放弃使用.col-md-10/.col-sm-6，改用flexbox或直接设置宽度：

示例HTML： #

<div class="d-flex align-items-center justify-content-start">
  <!-- 直接给搜索框设置宽度，搭配响应式工具类 -->
  <input type="text" class="form-control w-md-75 w-sm-80" placeholder="搜索内容">
  <button class="btn btn-primary ms-2">搜索</button>
</div>

这里的w-md-75是Bootstrap的宽度工具类，也可以自己写自定义类控制不同屏幕的宽度。

关键提醒 #

一定要确保你的自定义CSS文件在Bootstrap的CSS文件之后引入，不然就算选择器优先级够，也会被后面加载的Bootstrap样式覆盖！

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