Select2 bootstrap 元素未按预期调整大小

Question

我正在尝试使用 Bootstrap input-group and form-control, one of which wraps a 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 元素填充所有可用的 space 列而不是更多？

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

Answer 1

更新以使用 JQuery select2

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

使用 width 不会给你预期的结果，因为你在 input-group 里面，这是一个 flex 元素，你可以使用 [=22 让容器增长=]

由于你的例子使用的是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>

下面是原回答

删除包裹 select 的 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>

Select2 bootstrap 元素未按预期调整大小

Select2 bootstrap element not sizing up as expected

html

jquery-select2

bootstrap-4

更新以使用 JQuery select2

下面是原回答