使用引导框架时显示数据

Question

我有一个编辑表格 .form-horizontal 和 .control-label 。但是，现在我想向用户显示一条记录（例如，用户个人资料的详细信息）。所以我设想这样的事情：

 First Name:        Foo
Last Name:         Bar
Job:               Something

使用引导框架执行此操作的最佳方法是什么？我想使用与我的编辑表单相同的结构，但由于我要显示数据，所以我不能使用 .form-horizontal 类。如果我使用 <table> 标签，那么我可以使用什么类？

原文由 birdy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于引导程序 3

Bootstrap 3 提供了一个“水平描述”类来完全按照您的意愿呈现数据。

http://getbootstrap.com/css/#horizontal-description

使用您的示例数据，您将执行以下操作：

 <dl class="dl-horizontal">
  <dt>First Name</dt>
  <dd>Foo</dd>
  <dt>Last Name</dt>
  <dd>Bar</dd>
  <dt>Job</dt>
  <dd>Something</dd>
</dl>

原文由 routeburn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于引导程序 4

您可以使用 Description 列表对齐方式。例如-

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

原文由 Emdadul Sawon 发布，翻译遵循 CC BY-SA 4.0 许可协议