如何使用带有表格组件的 Bootstrap 3 网格系统? [英] How to use Bootstrap 3 grid system with table component?
问题描述
我已开始使用 Bootstrap 3 迁移到网格系统,但文档中的示例均使用 DIV:http://getbootstrap.com/css/#grid
我做了一个有点多余的代码,将 DIV 类与 TABLE 标签/类混合在一起:http://getbootstrap.com/css/#tables
问题是布局使边框加倍,我认为这应该是更好的方法.对此有什么建议吗?
Fiddle 中的示例代码:http://jsfiddle.net/7g8nV/1/
<table class="table table-bordered"><tr class="row"><td class="field-label col-md-3 active"><label>字段 1:</label></td><td class="col-md-9">值 1</td></tr><tr class="row"><td class="field-label col-md-3 active"><label>字段 2:</label></td><td class="col-md-9">值 2</td></tr><tr class="row"><td class="field-label col-md-3 active"><label>字段 3:</label></td><td class="col-md-9">值 3</td></tr>
提前致谢.
从 I have started a migration to grid system using Bootstrap 3, but the examples in the documentation are all using DIVs:
http://getbootstrap.com/css/#grid I made a somewhat redundant code that mixes the DIV classes with TABLE tags/classes:
http://getbootstrap.com/css/#tables The problem is that the layout dobles the borders and I think the should be a better way of doing that. Any recommendations on that? An example code in Fiddle: http://jsfiddle.net/7g8nV/1/ Thanks in advance. Remove the
这篇关于如何使用带有表格组件的 Bootstrap 3 网格系统?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! 元素中删除 row
类.该类使非表格行元素看起来像表格行,并添加了一些打破标准 <tr>
的样式.您仍然可以像往常一样使用col"类:<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.最小.css"><table class="table table-bordered"><tr><td class="field-label col-xs-3 active"><label>字段 1:</label></td><td class="col-md-9">值 1</td></tr><tr><td class="field-label col-xs-3 active"><label>字段 2:</label></td><td class="col-md-9">值 2</td></tr><tr><td class="field-label col-xs-3 active"><label>字段 3:</label></td><td class="col-md-9">值 3</td></tr></table>
<div class="table-responsive">
<table class="table table-bordered">
<tr class="row">
<td class="field-label col-md-3 active">
<label>Field 1:</label>
</td>
<td class="col-md-9">
Value 1
</td>
</tr>
<tr class="row">
<td class="field-label col-md-3 active">
<label>Field 2:</label>
</td>
<td class="col-md-9">
Value 2
</td>
</tr>
<tr class="row">
<td class="field-label col-md-3 active">
<label>Field 3:</label>
</td>
<td class="col-md-9">
Value 3
</td>
</tr>
</table>
</div>
row
class from your <tr>
elements. That class makes a non-table-row element look like a table-row and adds some styles that break a standard <tr>
. You can still use the "col" classes like normal:<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<table class="table table-bordered">
<tr>
<td class="field-label col-xs-3 active">
<label>Field 1:</label>
</td>
<td class="col-md-9">
Value 1
</td>
</tr>
<tr>
<td class="field-label col-xs-3 active">
<label>Field 2:</label>
</td>
<td class="col-md-9">
Value 2
</td>
</tr>
<tr>
<td class="field-label col-xs-3 active">
<label>Field 3:</label>
</td>
<td class="col-md-9">
Value 3
</td>
</tr>
</table>
登录
关闭