Bootstrap 4 如何调整Bootstrap4中位于.input组类内的所有元素的宽度？

在基于PHP的项目中，我使用Bootstrap4（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>

条件类别及；代码：*
文本
文本

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

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

谁能告诉我如何使用Bootstrap4处理宽度（我的意思是两个选择字段的宽度相同）

• 谢谢

---

尝试使用

输入组*

css选择器进行样式设置。但我认为最好使用

行

列网格系统，而不是手动调整宽度。

最好的方法是使用引导结构包装，然后将元素之间的

填充

和

边距

设置为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