如何使Dropdown与Textbox在同一行显示？Bootstrap布局修复

嘿，我懂你这困扰——本来没加Bootstrap的时候，地点下拉框和搜索输入框好好在一行，结果一用上Bootstrap就变成上下叠着了，怎么调display、position都没用。其实这问题大多是Bootstrap的默认样式把你的元素改成块级了，咱们来搞定它：

问题根源 #

Bootstrap 默认会给 <select> 元素设置 display: block，而且你把搜索输入框套在了一个 <div> 里，这个 div 默认也是块级元素，所以两个块级元素自然就上下排列了，直接改display属性可能被Bootstrap的样式优先级覆盖。

修复方案（两种可选） #

方案1：用Bootstrap Flex布局（推荐，响应式更省心） #

直接利用Bootstrap的flex类来实现同行对齐，代码改动如下：

修改后的HTML代码

<div class="container-fluid" style="padding: 0;">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <img class="homewall" src="#" height="50%" width="100%"/>
      <div class="logo"> Logo </div>
      <div class="heading"> Find the best Restaurants, Cafes and Bars </div>
      <!-- 用d-flex和align-items-center实现同行+垂直居中 -->
      <div class="search d-flex align-items-center">
        <!-- mx-3是Bootstrap的左右间距类，替代自定义margin -->
        <div class="mx-3">
          <select class="locdd">
            <option>Select Location</option>
            <option value="Mum">Mumbai</option>
            <option value="Del">Delhi</option>
            <option value="Bglr">Bangalore</option>
          </select>
        </div>
        <!-- position-relative是Bootstrap的相对定位类 -->
        <div class="position-relative mx-3">
          <span class="glyphicon glyphicon-search" style="position: absolute; font-size: 2rem; top: 40px; left: 35px"></span>
          <input class="restInput" type="text" placeholder="Enter Restaurant or Food" style="padding-left: 50px;"/>
        </div>
      </div>
    </div>
  </div>
</div>

调整后的CSS代码（优化居中与响应式）

.homewall { height: 480px; max-width: 100%; }
/* 用transform实现更精准的水平居中 */
.logo { 
  font-size: 80px; color: red; 
  position: absolute; top: 10%; 
  background: white; width: 110px; height: 110px; 
  left: 50%; transform: translateX(-50%);
  text-align: center; border-radius: 50%; 
}
.heading { 
  color: white; position: absolute; top: 35%; 
  font-size: 36px; font-weight: normal; 
  left: 50%; transform: translateX(-50%);
  text-align: center; 
}
.search { 
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); /* 水平+垂直居中 */
  text-align: center; 
}
.locdd { height: 60px; width: 245px; color: gray; border: none; font-size: 16px; }
.restInput { height: 60px; width: 477px; color: gray; border: none; font-size: 16px; }

@media only screen and (max-width: 600px) { 
  .restInput { height: 40px; width: 245px; color: gray; border: none; font-size: 16px; opacity: 0.7; }
  .homewall { max-width: 100%; }
  .logo { 
    text-align: center; font-size: 80px; color: red; 
    background: white; width: 115px; height: 123px; border-radius: 50%; 
    position: absolute; top: 10%; left: 50%; transform: translateX(-50%); 
  }
  /* 小屏幕下改为垂直排列 */
  .search { flex-direction: column; }
  .locdd { margin-bottom: 1rem; /* 小屏幕增加间距 */ }
}

方案2：强制设置inline-block（不依赖Bootstrap flex） #

如果不想用flex，直接给需要同行的元素强制设置display: inline-block，同时加上垂直对齐：

在你的CSS里添加：

.locdd {
  display: inline-block !important; /* 用!important覆盖Bootstrap默认样式 */
  vertical-align: middle;
}
.search > div:nth-child(2) { /* 选中输入框的父div */
  display: inline-block;
  vertical-align: middle;
}

注意：这种方式需要用!important来覆盖Bootstrap的默认块级样式，不过优先级太高，后续维护可能麻烦，所以更推荐方案1。

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