我可以使用bootstrap组合这样的输入组件吗？

Question

我现在正在尝试构建这样的表单。 （组合两个输入组件）

我发现有list-group个组件和input-group组件： list group

但我想知道我可以像列表组一样组合输入组件吗？

提前致谢。

Answer 1

我相信你可以简单地给Form输入list-group-item类：

  <div class="list-group">
    <input  class="list-group-item" type="text" />
    <input  class="list-group-item" type="text" />
  </div>

请参阅此jsFiddle。

Answer 2

你可以在任何元素上使用bootstrap类，它们的名字通常只是一个建议。仅仅因为该类被称为list-group，并不意味着它不能应用于相同效果的输入。

这些类只定义了视觉外观，而不是元素的功能或语义，所以请随意以任何方式将它们混合在一起。

例如，

<form name="somename" action="someaction" class="list-group">
  <input class="list-group-item" name="email" type="email" placeholder="email">
  <input class="list-group-item" name="password" type="password" placeholder="password">
</form>

有效并按预期显示。为了更好地控制输入的样式以及向单个行添加更多元素，可以将输入嵌套在div中，如下所示：

<form class="list-group">
  <div class="list-group-item">
    <input  type="text" placeholder="email">
  </div>
  <div class="list-group-item">
    <input type="text" placeholder="password">
  </div>
</form>