Question

如何设置按钮样式，使其外观和行为与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>

Answer 1

根据添加的样式，.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>

如何让药丸按钮看起来像链接？

1 个答案: