如何在twitter bootstrap中创建只读表单布局

Question

假设您在使用twitter bootstrap时拥有查看信息(而不是编辑信息).显示数据的最佳方式是什么？

这实际上是一个问题:https://github.com/twitter/bootstrap/issues/4094.

Answer 1

Bootstrap 3

BS3具有静态字段的概念.您可以在同一表单上混合和匹配静态字段和输入字段.或者将所有静态字段用于只读表单.

http://getbootstrap.com/css/#forms-controls-static

input您可以使用p此特殊引导类的标记而不是普通元素:

<p class="form-control-static">email@example.com</p>

Bootstrap 4:

您可以form-control-plaintext在input标签上使用该类.

请参阅https://getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text

Answer 2

我同意 MDO 在 github 上的回答。

下面是上面提供的示例，展示了如何使用 codepen 执行此操作。您可以尝试一下样式。非常酷的工具。

这也展示了如何链接到 codepen 中的引导样式表。

http://cdpn.io/gFecv