Question

我想要一个form，其中包含checkbox，textfield和button，textfield占用width <form> <input type="checkbox"> <input class='form-control'> <button class="btn btn-danger pull-right"> <i class="glyphicon glyphicon-minus"></i> </button> </form>可用。这可能吗？

form-inline

这是codepen我的（失败）意图

编辑：将我的问题更改为不需要{{1}}才能获得相同的结果

Answer 1

您可以在calc()中使用input="text"，根据Bootstrap Docs Examples，button将是form-group的兄弟，而不是您的孩子。< / p>

请注意，.form-inline 仅适用于视口范围内至少为768像素宽的表单。因此，您需要查看整个代码段的内容。

.form-group {
  border: red solid
}
input[type="text"] {
  width: calc(100% - 17px)
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<form class="form-inline">
  <div class="form-group">
    <input type="checkbox">
    <input type="text" placeholder="textfield">
  </div>
  <button type="submit" class="btn btn-default">
    Remove<i class="glyphicon glyphicon-minus"></i>
  </button>
</form>

更新（根据您更新的问题） - 您希望即使是较小的屏幕也能获得相同的结果 - 因此不需要form-inline）

我会说让我们保持form-inline，但让button孩子成为form-group而不是兄弟姐妹（就像我之前在答案中所说的那样 - 因为它应该相应于{{3} }}）

.form-group {
  border: red solid
}
#f1 input[type="text"] {
  width: calc(100% - 113px) /* regular button */
}
#f2 input[type="text"] {
  width: calc(100% - 101px) /* small button */
}
#f3 input[type="text"] {
  width: calc(100% - 91px) /* extra small button */
}
#f4 input[type="text"] {
  width: calc(100% - 141px) /* large button */
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<form id="f1" class="form-inline">
  <div class="form-group">
    <input type="checkbox">
    <input type="text" placeholder="textfield">
    <button type="submit" class="btn btn-default">
      Remove<i class="glyphicon glyphicon-minus"></i>
    </button>
  </div>
</form>
<form id="f2" class="form-inline">
  <div class="form-group">
    <input type="checkbox">
    <input type="text" placeholder="textfield">
    <button type="submit" class="btn btn-sm btn-default">
      Remove<i class="glyphicon glyphicon-minus"></i>
    </button>
  </div>
</form>
<form id="f3" class="form-inline">
  <div class="form-group">
    <input type="checkbox">
    <input type="text" placeholder="textfield">
    <button type="submit" class="btn btn-xs btn-default">
      Remove<i class="glyphicon glyphicon-minus"></i>
    </button>
  </div>
</form>
<form id="f4" class="form-inline">
  <div class="form-group">
    <input type="checkbox">
    <input type="text" placeholder="textfield">
    <button type="submit" class="btn btn-lg btn-default">
      Remove<i class="glyphicon glyphicon-minus"></i>
    </button>
  </div>
</form>

Answer 2

试试这个：

<div class="container">

  <div class="input-group">
    <input type="text" class="form-control">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default">
        <input type="checkbox">
      </button>
      <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-minus"></i></button>
    </div>
  </div>

</div>

其他输入旁边的Bootstrap文本字段，使用整个宽度

2 个答案: