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>

Answer 2

我希望你正在寻找这个

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="col col-md-6">
    <div class="btn-group">
  <button type="button" class="btn btn-primary form-control mb-2 ">Store Groups</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split form-control mb-2 mr-sm-2" data-toggle="dropdown">
   
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Store Groups</a>
    <a class="dropdown-item" href="#">Sports</a>
  </div>
</div>
   

    <input type="number" step="5" id="input1-group3" name="input1-group3" placeholder="Username" class="form-control mb-2 mr-sm-2">
 <div class="input-group-addon form-control mb-2 ">/page</div> <button type="submit" class="btn btn-primary mb-2">Submit</button>

  </div>
  </form>

输入组内部4的输入大小

2 个答案: