Bootstrap select 输入的宽度看起来比其他输入（文本）短

Question

我在 bootstrap 中遇到了一个奇怪的问题。我正在分享输入图片：

我的代码是：

<div class="col-2 list_sidebar p-2">
    <div class="row">
       <div class="form-group">
           <input v-model="hospital_name" type="text" class="form-control" 
            placeholder="Hospital Name">
       </div>
    </div>
    <div class="row">
       <div class="form-group">
           <select class="form-control" v-model="district" 
                                   placeholder="District" @change="getThanaList">
                <option value="">Select District</option>
                <option v-for="(district, i) in districtList" :key="i" 
                                   :value="district.id">{{ district.title }}</option>
            </select>
        </div>
        <div class="form-group">
            <select v-model="thana" class="form-control">
                 <option value="">Select Thana</option>
                 <option v-for="(thana, t) in thanaList" :key="t" :value="thana.id">{{ 
                  thana.title }}</option>
            </select>
        </div>
        <div class="form-group">
             <button @click="searchRequest" type="submit" class="btn btn- 
              warning">Filter</button>
        </div>
    </div>
</div>

我也试过在 css 中将它们设置为 100% 宽度，但不起作用

Answer 1

您的代码中有很多错误。首先，通过使用 bootstrap，您从一行开始，然后在该行内放置您想要的所有内容。你有一列，然后是 3 行。

你应该做什么：

<form class="row">
  <div class="col">
    first input
  </div>
  <div class="col">
    second input
  </div>
  <div class="col">
    third input
  </div>
  <div class="col">
    button
  </div>
</form>

并根据您的风格调整该代码。

Bootstrap select 输入的宽度看起来比其他输入（文本）短

Bootstrap select input's width appears shorter than other inputs (text)

bootstrap-4

bootstrap-5