如何在Bootstrap 4中移除select选项背景及调整导航栏样式

嘿，我来帮你搞定这些导航栏的样式需求！看你的代码用的是Bootstrap导航栏，那咱们直接通过CSS来实现你要的效果：

1. 移除select的背景与边框 #

给你的select元素添加以下CSS样式，就能去掉背景和边框，连聚焦时的轮廓也一并处理：

.navbar-select {
  background: transparent;
  border: none;
  outline: none;
  /* 如果需要去掉默认的下拉箭头，可加下面这句 */
  appearance: none;
}

记得给你的select标签加上class="navbar-select"类名，这样样式就能生效啦。

2. 在select与搜索栏之间添加间距 #

最简单的方式是用margin来控制间距，比如给select加右侧外边距，或者给搜索栏加左侧外边距：

.navbar-select {
  /* 给select右侧加1rem的间距，可根据需求调整数值 */
  margin-right: 1rem;
}

/* 或者给搜索栏加左侧间距 */
.navbar-search {
  margin-left: 1rem;
}

同样，给搜索栏也加上对应的类名class="navbar-search"就行。

3. 导航栏项目水平对齐 #

Bootstrap的navbar-nav默认就是水平排列的，但如果你的项目没对齐，可能需要调整flex布局属性：

.navbar-nav {
  display: flex;
  align-items: center; /* 垂直居中对齐项目 */
  gap: 1rem; /* 给导航项之间也加上间距，可选 */
}

如果想让整个导航栏内容居中/右对齐，还可以调整父容器的justify-content：

#navbarSupportedContent {
  /* 居中对齐 */
  justify-content: center;
  /* 如果要右对齐，用下面这句 */
  /* justify-content: flex-end; */
}

完整示例代码 #

这里补全了你没贴全的select和搜索栏部分，方便你参考：

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="test.php">
        <i class="fa fa-home"></i> Home
        <span class="sr-only">(current)</span>
      </a>
    </li>
  </ul>
  <!-- 添加select元素 -->
  <select class="navbar-select">
    <option>选项1</option>
    <option>选项2</option>
  </select>
  <select class="navbar-select">
    <option>分类A</option>
    <option>分类B</option>
  </select>
  <!-- 添加搜索栏 -->
  <input type="search" class="navbar-search" placeholder="搜索...">
</div>

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