如何调整Bootstrap 4中.input-group类中所有元素的宽度？

Question

在基于PHP的项目中，我使用Bootstrap 4（v4.1.0）。在某些形式的某些部分中，我需要使用 .input-group 类和 .input-group-append 类来组合紧密相关的字段。这是示例代码：

<div class="col-sm-12 col-12">
    <div class="form-group">
        <label for="condition_category" class="form-control-label">Condition Category &amp; Code:&nbsp;<span class="text-danger">*</span></label>
        <div class="input-group mb-3">
            <select name="condition_category" id="condition_category" class="form-control">
                <option value="Value">Text</option>
            </select>

        <div class="input-group-append">
            <select name="condition_code" id="condition_code" class="form-control condition_code">
                <option value="Value">Text</option>
            </select>
       </div>
    </div>
</div>

一切正常，除了，我无法控制这些元素的宽度。下图是一个示例：

您可能会注意到两个字段的宽度不同。但我希望两者的宽度相同（图像中的“显示”按钮除外）。

谁能告诉我如何使用Bootstrap 4处理宽度（我的意思是两个选择字段的宽度都一样）？

• 谢谢

Answer 1

尝试使用.input-group * CSS选择器设置样式。但是我认为最好使用row col网格系统，而不是手动调整宽度。

Answer 2

以最佳方式，您可以通过包装引导结构，然后将元素之间的padding和margin设置为0来实现此目的。

<div class="container">
  <div class="row">
    <div class="col-md-8">text Box</div>
   <div class="col-md-2">btn 1</div>
   <div class="col-md-2">btn 2</div>
</div>
</div>

每台设备的确切类都是

col-8 col-sm-8 sol-md-8 col-lg-8 col-xl-8

col-2 col-sm-2 sol-md-2 col-lg-2 col-xl-2

col-2 col-sm-2 sol-md-2 col-lg-2 col-xl-2

手动宽度不是一个好的选择。

希望这会对您有所帮助。