在 Bootstrap 4 中调整输入大小

Posted 2023-03-06

【中文标题】在 Bootstrap 4 中调整输入大小

【英文标题】：Adjust the input size in Bootstrap 4

【发布时间】：2018-10-24 19:42:59

【问题描述】：

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>

【参考方案1】：

尝试在选择和输入中添加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>

【讨论】：

@BillPham 很高兴，它奏效了。确保在容器中添加行类。 bootstrap的网格布局就是围绕这个结构设计的。

【参考方案2】：

您需要将 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 那么它会给出负边距 需要。

【讨论】：

欢迎@BillPham :)

为什么我们不需要将row 类添加到父元素中呢？与其他答案一样，他/她确实有 row 类。

你看看如果我们给行类然后它添加左右边距到-15px，在这种情况下我们不需要它

Bootstrap 4 使用 flex 所以你也不用担心 clearfixing 元素。

@BillPham .input-group 已经有 .row 风格，所以不需要排。在那，如果你给行，那么它会给出不需要的负边距