引导glyphicon作为按钮显示在表格上
[英]bootstrap glyphicon as button display on table
问题描述
I'm new to the whole bootstrap thing so even though i tried to solve this for last 3 hours, i could'nt. 
我是整个引导程序的新手，所以即使我试图解决最近3个小时的问题，我也无法做到。 I need a table to have 2 buttons in a cell that looks like a glypicon (so i can add javascript functions to them later). 我需要一个表格，在看起来像glypicon的单元格中有2个按钮（以便以后可以向其中添加javascript函数）。 I managed to do this in 2 ways, but the problem is these buttons expand table row a lot. 我设法用两种方法做到这一点，但是问题是这些按钮使表格行扩展了很多。 How do i solve this? 我该如何解决？ maybe alternate method of making a button? 也许做按钮的替代方法？
Here is how the table looks right now: 这是表格的外观：
https://puu.sh/wbMUf/50a535e0f9.png https://puu.sh/wbMUf/50a535e0f9.png
here are the lines used to achieve the result for the cell in the first row: 这是用于获得第一行单元格结果的行：
<td>
<p class = "btn"><span class = "fa fa-edit"></span></p>
<p class = "btn"><span class = "fa fa-trash"></span></p>
</td>
and for the cell in the second row: 对于第二行中的单元格：
<td>
<button type = "button" class = "btn btn-link"><span class = "fa fa-edit"></span></button>
<button type = "button" class = "btn btn-link"><span class = "fa fa-trash"></span></button>
</td>
Second option doesnt work, because the glyphs have to styled the same as the rest of the text in the table. 第二个选项不起作用，因为字形的样式必须与表中其余文本的样式相同。
2 个解决方案
解决方案1
1 已采纳 2017-06-05 18:46:30
you can give td width:10%; 您可以给td width:10%; or less. 或更少。
for extra space, check margin-top and margin-bottom in css . 要获得额外的空间，请检查css margin-top和margin-bottom 。
解决方案2
1 2017-06-05 18:59:41
You could do something like this 你可以做这样的事情
https://jsfiddle.net/7h4qqx44/2/ https://jsfiddle.net/7h4qqx44/2/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container style="margin-top: 50px;">
<table class="table table-inverse">
<thead>
<tr>
<th>Index</th>
<th>Name</th>
<th>Surname</th>
<th>Job</th>
<th>Wage, €</th>
<th>bla, €</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>bla</td>
<td>blum</td>
<td>
<p class="btn" style="width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class="glyphicon glyphicon-edit"></span></p>
<p class="btn" style="width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class="glyphicon glyphicon-trash"></span></p>
</td>
</tr>
<tr>
<th scope="row"></th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td>bla</td>
<td>blum</td>
<td>
<p class="btn" style="width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class="glyphicon glyphicon-edit"></span></p>
<p class="btn" style="width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class="glyphicon glyphicon-trash"></span></p>
</td>
</tr>
<tr>
<th scope="row"></th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td>bla</td>
<td>blum</td>
<td>
<p class="btn" style="width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class="glyphicon glyphicon-edit"></span></p>
<p class="btn" style="width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class="glyphicon glyphicon-trash"></span></p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In the CSS - 在CSS中-
.addSpacing {
margin-left: 5%;
}
You could code functionalities by assigning an id/class to these glyphicons. 您可以通过为这些字形分配ID /类来对功能进行编码。 I hope this helps! 我希望这有帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.