如何附加多个表单控件 (bootstrap 3)

Question

我想连接多个文本输入，其布局与连接带有附加的文本输入相同。但是，我不确定该怎么做。根据文档，只能将按钮或文本附加到文本输入：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
    
      <div class="input-group">
        <label class="input-group-addon">
          <input type="checkbox">
        </label>
        <input type="text" class="form-control">
      </div>
    
    </div>
  </div>
</div>

但是，我想连接 2 个文本输入。但是当我尝试时，输入开始堆叠而不是彼此相邻显示：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
    
      <div class="input-group">
        <label class="input-group-addon">
          <input type="checkbox">
        </label>
        <input type="text" class="form-control">
        <input type="text" class="form-control">
      </div>
    
    </div>
  </div>
</div>

我怎样才能达到我想要的？

Answer 1

您必须将 class .input-group .form-control 的 width 属性更改为 auto。目前是100%。这就是输入占用整个 space.

的原因

注意：这将覆盖默认行为，因此如果您想避免默认修改，您可以添加自定义 class 名称然后修改。

如何附加多个表单控件 (bootstrap 3)

How to append multiple form-controls (bootstrap 3)

css

twitter-bootstrap

twitter-bootstrap-3