我已经使用Bootstrap 3开始迁移到网格系统,但文档中的示例都使用DIV:
http://getbootstrap.com/css/#grid
http://getbootstrap.com/css/#grid
我做了一个有点冗余的代码,将DIV类与TABLE标签/类混合在一起:
http://getbootstrap.com/css/#tables
问题是布局使边界更加复杂,我认为这应该是更好的方法.有什么建议吗?
fiddle中的示例代码:http://jsfiddle.net/7g8nV/1/
<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>
提前致谢.
解决方法
从< tr>中删除行类元素.该类使非表行元素看起来像一个表行,并添加了一些破坏标准< tr>的样式.你仍然可以像普通的那样使用“col”类:
<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>
原文地址:https://www.jb51.cc/bootstrap/234086.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。