Select2 引导元素未按预期调整大小

Question

我正在尝试使用Bootstrap input-group 和form-control 设置我的页面布局，其中一个包含Select2 元素。

这是我的 HTML 代码的一部分：

<div class="col-3">
    <div id='status-input-group' class="input-group input-group-sm mb-2">
        <div class="input-group-prepend">
            <label id="label" class="input-group-text" for="status">Status</label>
        </div>
        <div>
            <select id="status" class="form-control" aria-label="Small" aria-describedby="label"></select>
        </div>
    </div>
    <div id='invoice-input-group' class="input-group input-group-sm mb-2">
        <div class="input-group-prepend">
            <label id="label" class="input-group-text" for="invoice-id">Invoice</label>
        </div>
        <input id="invoice-id" class="form-control" aria-label="Small" aria-describedby="label" disabled />
    </div>
...
</div>

看起来像这样：

我希望select2 元素的右边缘与下面的输入对齐。

我尝试为包含select2 的div 设置style="width: 100%;"。但随后select2 的宽度变为与下方元素的全宽相同，并转到另一行。

如何让select2 元素填满列的所有可用空间，但不多？

我尝试将width 手动设置为77% 之类的值，但它仅适用于特定的窗口宽度，因此根本不是解决方案。

Answer 1

更新以使用 JQuery select2

Select2 将原生 select 元素替换为它生成和管理的元素。当它生成它的元素时，它会查看父元素的大小来调整自己的大小，如果你调整父元素的大小，select2 就会有你期望的大小。

使用 width 不会给您预期的结果，因为您在 input-group 内部，这是一个 flex 元素，您可以使用 flex property 使容器增长

由于您的示例使用 Bootstrap4，并且有一个 bootstrap4 theme，您可以直接使用它，通过 CDN 或安装，以使 select2 样式与您的其余输入相匹配。

$('#status').select2({
  theme: 'bootstrap4'
});

$('#status-s').select2({
  // ...
});

$('#status-w').select2({
  // ...
});

#s2-container-good {
  flex: 1;
}

#s2-container-width {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.3.4/dist/select2-bootstrap4.min.css" integrity="sha256-J6L5BfjnEuIwj6+OSc2OBxc8+BEGW3ZTz7wDHepaayI=" crossorigin="anonymous">

<div class="col-3">
  <div class="legend">Using flex: 1</div>
  <div id='status-input-group' class="input-group input-group-sm mb-2">
    <div class="input-group-prepend">
      <label id="label" class="input-group-text" for="status">Status</label>
    </div>
    <div id="s2-container-good">
      <select id="status" class="form-control" aria-label="Small" aria-describedby="label">
        <option>Done</option>
        <option>Waiting</option>
        <option>Undefined</option>
      </select>
    </div>
  </div>
  <div id='invoice-input-group' class="input-group input-group-sm mb-2">
    <div class="input-group-prepend">
      <label id="label" class="input-group-text" for="invoice-id">Invoice</label>
    </div>
    <input id="invoice-id" class="form-control" aria-label="Small" aria-describedby="label" disabled />
  </div>
  <!-- This select will not use the full width -->
  <div class="legend">No CSS</div>
  <div id='status-input-group' class="input-group input-group-sm mb-2">
    <div class="input-group-prepend">
      <label id="label" class="input-group-text" for="status">Status</label>
    </div>
    <div id="s2-container-no-css">
      <select id="status-s" class="form-control" aria-label="Small" aria-describedby="label">
        <option>Done</option>
        <option>Waiting</option>
        <option>Undefined</option>
      </select>
    </div>
  </div>
  <!-- This select will jump to the next line -->
  <div class="legend">Width: 100%</div>
  <div id='status-input-group' class="input-group input-group-sm mb-2">
    <div class="input-group-prepend">
      <label id="label" class="input-group-text" for="status">Status</label>
    </div>
    <div id="s2-container-width">
      <select id="status-w" class="form-control" aria-label="Small" aria-describedby="label">
        <option>Done</option>
        <option>Waiting</option>
        <option>Undefined</option>
      </select>
    </div>
  </div>
</div>

原答案如下

删除包装选择的div，它将起作用。

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<div class="col-3">
  <div id='status-input-group' class="input-group input-group-sm mb-2">
    <div class="input-group-prepend">
      <label id="label" class="input-group-text" for="status">Status</label>
    </div>
    <select id="status" class="form-control" aria-label="Small" aria-describedby="label">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>
  </div>
  <div id='invoice-input-group' class="input-group input-group-sm mb-2">
    <div class="input-group-prepend">
      <label id="label" class="input-group-text" for="invoice-id">Invoice</label>
    </div>
    <input id="invoice-id" class="form-control" aria-label="Small" aria-describedby="label" disabled />
  </div>
  ...
</div>