Question

似乎select元素和input元素的宽度相等。如何才能使input元素占用更多空间，select占用的空间更少？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03">
    <option selected>Choose...</option>
    <option value="1">One</option>
  </select>
  <input class="form-control">
</div>

Answer 1

您需要在选择

中添加col- *类

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select col-3" id="inputGroupSelect03">
    <option selected>Choose...</option>
    <option value="1">One</option>
  </select>
  <input class="form-control col">
</div>

.input-group已经.row样式，因此无需提供.row 类。如果你给.row，那么它给出的负余量不会需要。

Answer 2

尝试在选择和输入中添加col-*类：

      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
      <div class="input-group mb-3 row">
        <div class="input-group-prepend">
          <button class="btn btn-outline-secondary" type="button">Button</button>
        </div>
        <select class="custom-select col-4" id="inputGroupSelect03">
          <option selected>Choose...</option>
          <option value="1">One</option>
        </select>
        <input class="col-8 form-control">
      </div>

调整Bootstrap 4中的输入大小

2 个答案: