如何将Bootstrap选择按钮嵌入输入框左侧？

嘿，我看你想把货币选择框放在贷款金额输入框的左侧，用Bootstrap的话其实很容易调整，我帮你改了下代码，你看看：

首先是调整后的HTML结构：

<div class="row">
  <div class="col one">
    <label class="label">Loan amount</label>
    <div class="input-group mb-3">
      <!-- 把select放在input前面，去掉不必要的input-group-text类 -->
      <select class="form-select btn-primary" id="currency-select" aria-label="Select currency">
        <option selected>USD</option>
        <option value="1">ETH</option>
        <option value="2">USDC</option>
      </select>
      <input class="form-control loan" type="text" style="direction: rtl;" placeholder="0.00" aria-label="Loan amount" aria-describedby="currency-select">
    </div>
    <label class="label" for="customRange1">Duration</label>
    <div class="range">
      <input type="range" class="form-range" id="customRange1" />
    </div>
  </div>
</div>

主要改了这几点：

• 去掉了select上的input-group-text类，这个类是给文本类型的前缀用的，直接用form-select作为input-group的子元素就可以，Bootstrap会自动帮你把它排在输入框左边。
• 调整了aria属性，让页面语义更友好，方便无障碍访问。
• 确保select在input的前面，input-group的子元素是按照DOM顺序排列的，所以前缀控件要写在输入框前面。

如果觉得两个控件的圆角衔接不够自然，还可以加一点点自定义CSS优化：

#currency-select {
  width: auto; /* 让选择框只占自身内容的宽度，不用撑满 */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.loan {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

这样改完之后，选择框就会乖乖待在输入框左边啦～

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