bootstrap glyphicon作爲表格上的按鈕顯示

我是新來的整個bootstrap的東西，所以即使我試圖解決這個最後3小時，我could'nt。我需要一張桌子在單元格中有2個按鈕，看起來像一個glypicon（所以我可以在以後爲它們添加javascript功能）。我設法以兩種方式做到這一點，但問題是這些按鈕很大程度上擴展了表格行。我如何解決這個問題？也許另一種製作按鈕的方法？bootstrap glyphicon作爲表格上的按鈕顯示

下面是表的外觀現在：

https://puu.sh/wbMUf/50a535e0f9.png

這裏是用來實現第一行單元格中的結果行：

<td> 
    <p class = "btn"><span class = "fa fa-edit"></span></p> 
    <p class = "btn"><span class = "fa fa-trash"></span></p> 
</td>

和細胞在第二行：

<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>

第二個選項沒有w ork，因爲字形必須與表格中文本的其餘部分相同。

來源

2017-06-05 NulisDefo

你可以給td寬度：10％;或更少 – tech2017

這是一個很好的附加記住，但不解決問題，行有很多額外的空間在底部 – NulisDefo

的空間，檢查邊緣頂部和邊緣底部的CSS。 – tech2017

您可以給td width:10%;或更少。

爲額外的空間，檢查margin-top和margin-bottom在css。

來源

2017-06-05 18:46:30 tech2017

雖然它工作得更好，如果我把它應用到按鈕本身而不是td – NulisDefo

你可以做這樣的事情

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>

在CSS -

.addSpacing { 
    margin-left: 5%; 
}

你可以通過分配一個ID /類這些glyphicons編碼功能。我希望這有幫助！

來源

2017-06-05 18:59:41 Pugh

這裏是我的代碼看起來如何現在和小提琴都很好，所有，但是當我在我的筆記本電腦本地做我的問題我之前提到 [鏈接]（https://jsfiddle.net/7h4qqx44/3/） – NulisDefo

你可以顯示你使用的代碼嗎？還有任何與之相關的CSS？ – Pugh

這裏[link]（https://jsfiddle.net/NulisDefo/yqvpL1c4/4/）幾乎所有的代碼都是截至目前爲止 – NulisDefo

bootstrap glyphicon作爲表格上的按鈕顯示

回答

相關問題