Html 使用引导框架时显示数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14222450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
displaying data when using bootstrap framework
提问by birdy
I have an edit form which .form-horizontaland .control-label. However, now I want to display one record to the user (for example, details of a users profile). So I envision something like this:
我有一个编辑表单，其中.form-horizontal和.control-label. 但是，现在我想向用户显示一条记录（例如，用户个人资料的详细信息）。所以我设想了这样的事情：
First Name: Foo
Last Name: Bar
Job: Something
What is the best way to do this using bootstrap framework? I wanted to use the same structure as my edit form but since I'll be showing data, I can't used the .form-horizontalclass. If I use the <table>tag then what class could I use?
使用引导框架执行此操作的最佳方法是什么？我想使用与编辑表单相同的结构，但由于我将显示数据，因此无法使用.form-horizontal该类。如果我使用<table>标签，那么我可以使用什么类？
回答by routeburn
Bootstrap provides a 'Horizontal Description' class to do present data exactly like you wish.
Bootstrap 提供了一个“水平描述”类来完全按照您的意愿呈现数据。
http://getbootstrap.com/css/#horizontal-description
http://getbootstrap.com/css/#horizontal-description
With your example data, you would do something like this:
使用您的示例数据，您将执行以下操作：
<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>
回答by Freddy Sidauruk
You can use table too here is for example
例如，您也可以在这里使用表格
<table class= "table table-user-information">
<tbody>
<tr>
<td>Dokter Umum:</td>
<td><?php echo $row->terap_addressdoc ?></td>
</tr>
<tr>
<td>Specialist Chiropactic</td>
<td><?php echo $row->terap_specialist ?></td>
</tr>
<tr>
<td>Email</td>
<td><?php echo $row->terap_terapist ?></td>
</tr>
</tbody>
</table>
回答by Emdadul Sawon
For Bootstrap 4
对于 Bootstrap 4
You can use Description list alignment. For example-
您可以使用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>