css - 输入组 Bootstrap 4 中的输入大小调整

Question

我想创建一个文本输入应该很小的输入组，我添加了 .col-3 但它破坏了布局

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
  <div class="row form-group">
    <div class="col col-md-6">
      <div class="input-group">
        <div class="input-group-btn">
          <div class="btn-group"><button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-primary">Store Groups</button>
            <div tabindex="-1" aria-hidden="true" role="menu" class="dropdown-menu"><button type="button" tabindex="0" class="dropdown-item">Sports</button><button type="button" tabindex="1" class="dropdown-item">Kids Sport</button></div>
          </div>
        </div>
        <div class="col-3"><input type="number" step="5" id="input1-group3" name="input1-group3" placeholder="Username" class="form-control"></div>
        <div class="input-group-addon">/page</div><button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button></div>
    </div>
  </div>
</form>

这里是如果我们不添加尺寸

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
  <div class="row form-group">
    <div class="col col-md-6">
      <div class="input-group">
        <div class="input-group-btn">
          <div class="btn-group"><button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-primary">Store Groups</button>
            <div tabindex="-1" aria-hidden="true" role="menu" class="dropdown-menu"><button type="button" tabindex="0" class="dropdown-item">Sports</button><button type="button" tabindex="1" class="dropdown-item">Kids Sport</button></div>
          </div>
        </div><input type="number" step="5" id="input1-group3" name="input1-group3" placeholder="Username" class="form-control">
        <div class="input-group-addon">/page</div><button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button></div>
    </div>
  </div>
</form>

我该怎么办？

Answer 1

我认为您正在寻找类似的东西。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <form class="form-horizontal">
      <div class="row form-group">
        <div class="col col-md-6">
          <div class="input-group">
            <div class="input-group-btn">
              <div class="btn-group"><button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-primary">Store Groups</button>
                <div tabindex="-1" aria-hidden="true" role="menu" class="dropdown-menu"><button type="button" tabindex="0" class="dropdown-item">Sports</button><button type="button" tabindex="1" class="dropdown-item">Kids Sport</button></div>
              </div>
            </div>
            <div class="input-group mb-3 col-7">
              <input type="number" step="5" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon2">
              <div class="input-group-append">
    
                <input class="form-control" id="disabledInput" type="text" placeholder="/page" disabled style="width: 100px">
                <button class="btn btn-primary" type="button"><i class="fa fa-search"></i></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>