我们怎样才能使bootstrap行/列看起来像一个表？
ksn*_*sno 11 css css3 twitter-bootstrap
我的#1尝试失败,因为在col中填充.
这是理想的结果:
有人能帮助我吗？如果可能,请避免重写引导规则.
表 - >行/列的基本原则是,在特定行中,无论内容是什么,列都应该具有相同的高度.
你可以使用bootstrap网格制作表 - >行/列结构,但是会出现高度相等列的问题.
因此,为此目的,即对于相等的列,您可以使用flexbox属性.(它在ie9中不起作用,因此请确保其使用.)
只需将以下简单的CSS添加到父容器中(对于小提琴上方的完整演示结帐),
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
你可以使用table-responsive:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr> <td></td> <th>Chrome</th> <th>Firefox</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr>
</thead>
<tbody>
<tr>
<th scope="row">Android</th>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-muted" rowspan="3" style="vertical-align:middle">N/A</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<th scope="row">iOS</th>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-muted">N/A</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
</tr>
<tr>
<th scope="row">Mac OS X</th>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
</tr>
<tr>
<th scope="row">Windows</th>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>小智 5
您是否尝试过使用Bootstrap表？如果没有,我建议你这样做,并设置<td>你想要的宽度.例如:
<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>