我該如何讓藥丸按鈕看起來像鏈接？

我怎樣才能讓按鈕的外觀和行爲與Bootstrap Vertical Pills中的鏈接完全相同？ btn-link不會這樣做（將鼠標懸停在片段中的每個片段上）。我該如何讓藥丸按鈕看起來像鏈接？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<ul class="nav nav-pills nav-stacked"> 
 
    <li> 
 
    <a href="#">Link</a> 
 
    </li> 
 
    <li> 
 
    <button type="button" class="btn btn-link">Button</button> 
 
    </li> 
 
</ul>

來源

2016-01-13 TrueWill

基於所加入的造型，所述.btn元件是inline-block，而a元素是li元件的後代是block水平。

因此你可以簡單地給.btn-link元素的100％的寬度，並更改display到block並添加相應的padding/border-radius：

.nav-pills>li>.btn.btn-link { 
 
    display: block; 
 
    width: 100%; 
 
    text-align: left; 
 
    padding: 10px 15px; 
 
    border-radius: 4px; 
 
    outline: none; 
 
    border: none; 
 
} 
 
.nav-pills>li>.btn.btn-link:hover, 
 
.nav-pills>li>.btn.btn-link:focus { 
 
    text-decoration: none; 
 
    background-color: #eee; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<ul class="nav nav-pills nav-stacked"> 
 
    <li> 
 
    <a href="#">Link</a> 
 
    </li> 
 
    <li> 
 
    <button type="button" class="btn btn-link">Button</button> 
 
    </li> 
 
</ul>

來源

2016-01-13 20:41:09

主要缺點我已經發現這似乎打破了響應式設計。當在較小的窗口中查看頁面時，這些按鈕的行爲與普通藥片的行爲不同。這可能是特定於我們的造型/腳本;我仍在調查。 – TrueWill

@TrueWill我可以看看你是否提供了一個例子。 –

謝謝 - 我想我們知道了。 – TrueWill

我該如何讓藥丸按鈕看起來像鏈接？

回答

相關問題