Question

我有一个烧瓶应用程序，带有一点UI。我对表格单元格有一些格式化问题，特别是当单元格中的数据太多而无法放入第一行并溢出时。

这里有详细信息： 1.使用Bootstrap / Bootswatch模板（Bootstrap 3.0）

问题：我正在显示一个表（下面的代码），每一行都是我从jinja2模板生成的链接列表。在有少数情况下，事情都是一致的 <td></td>中的项目，但是如果我有更多的项目，那么它会溢出来按钮往往重叠，触摸教其他。

我正在寻找一种方法来维护一些对齐单元，无论我在行上显示多少个按钮，并在按钮之间保持一些填充。

代码段

`

<table class="table table-striped table-hover">
<thead>
<th> Environment </th><th>Roles</th>
</thead>
<tbody>
<tr>
<td>
<h5>Some Label</h5>
</td>
<td>
 <a href="/connect/url/DUMMY/" class="btn btn-info" data-toggle="tooltip" 
  data-placement="top" title="... test title" >DUMMY</a>
 <a href="/connect/url/DUMMY1/" class="btn btn-info" data-toggle="tooltip" 
  data-placement="top" title="... test title" >DUMMY1</a>
 <a href="/connect/url/DUMMY2/" class="btn btn-info" data-toggle="tooltip" 
  data-placement="top" title="... test title" >DUMMY2</a>
 <a href="/connect/url/DUMMY3/" class="btn btn-info" data-toggle="tooltip" 
  data-placement="top" title="... test title" >DUMMY3</a>
 </td>
</tr>
<tr>
<td>
<h5>Another</h5>
:
</td>
 </tr>
</tbody> 
</table>

Answer 1

试试这个：

＆＃13;

<td clas="pt-5"> </td> <!--Padding 5 units on top-->
<td clas="pb-5"> </td> <!--Padding 5 units on bottom-->
<td clas="pr-5"> </td> <!--Padding 5 units on right-->
<td clas="pl-5"> </td> <!--Padding 5 units on left-->

<td clas="mt-5"> </td> <!--Margin 5 units on top-->
<td clas="mb-5"> </td> <!--Margin 5 units on bottom-->
<td clas="mr-5"> </td> <!--Margin 5 units on right-->
<td clas="ml-5"> </td> <!--Margin 5 units on left-->

＆＃13;

Answer 2

好的，我找到了一种通过设置LINE-HEIGHT

来确保格式正确的方法

<td style="LINE-HEIGHT:50px">

所以这解决了我的格式问题：

<td style="LINE-HEIGHT:50px">
 <a href="/connect/url/DUMMY/" class="btn btn-info" data-toggle="tooltip" 
  data-placement="top" title="... test title" >DUMMY</a>
 <a href="/connect/url/DUMMY1/" class="btn btn-info" data-toggle="tooltip" 
  data-placement="top" title="... test title" >DUMMY1</a>
 <a href="/connect/url/DUMMY2/" class="btn btn-info" data-toggle="tooltip" 
  data-placement="top" title="... test title" >DUMMY2</a>
 <a href="/connect/url/DUMMY3/" class="btn btn-info" data-toggle="tooltip" 
  data-placement="top" title="... test title" >DUMMY3</a>
 </td>

添加填充到引导表单元格

2 个答案: