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

Question

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

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

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

提前致谢。

Answer 1

我相信你可以简单地给表单输入 list-group-item class:

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

看到这个jsFiddle。

Answer 2

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

这些 class 仅定义元素的视觉外观，而不定义元素的功能或语义，因此请随意以您认为视觉上令人愉悦的方式混合它们。

例如，

<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>

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

Can I combine input components like this using bootstrap?

css

frontend

twitter-bootstrap