html - ListView 内的 Bootstrap 按钮不起作用

Question

我试图在 bootstrap 的 ListView 中获取一个按钮以访问两个不同的链接，并且它始终遵循 ListView 链接，而不是按钮链接(如果我按下按钮)。我如何实现这一目标？

<a href="foo.html" class="list-group-item">
    <p>This links somewhere different than the button</p>
    <button href="bar.html" class="btn btn-success">Example</button>
</a>

Answer 1

按原样使用 Bootstrap 似乎不容易完成，但一些调整可以让我们得到我们想要的东西。主要问题是嵌套 anchor 并不是真正有效的 HTML。然而，我们可以通过将一个链接绝对定位在另一个链接之上来达到同样的效果。

看看这个 JS Bin:

http://jsbin.com/febivi/2/

总结:

将一个新类添加到将定义我们新容器的列表组:

  <ul class="list-group action-list-group">
    <li class="list-group-item">
      <a class="list-group-link" href="http://stackoverflow.com">Cras justo odio</a>
      <a class="btn btn-sm btn-default" href="http://google.com">Go</a>
    </li>
    <li class="list-group-item">
      <a class="list-group-link" href="http://stackoverflow.com">Cras justo odio</a>
      <a class="btn btn-sm btn-default" href="http://google.com">Go</a>
    </li>  
  </ul>

主要链接是“.list-group-link”，次要链接是“.btn”操作。

接下来我们添加一些 CSS 来为列表组项目的内部操作列表组添加样式:

.action-list-group {
  position: relative;
}

/* remove the list group padding since our nested anchor tag will now have it */
.action-list-group .list-group-item {
  padding: 0;
}

.action-list-group .list-group-item > a.list-group-link {
  display: block;
  /* inherit from .list-group-item */
  padding: 10px 15px;
  color: #555;
}

/* re-add the link styling */
.action-list-group .list-group-item > a.list-group-link:hover {
  background: #f5f5f5;
  text-decoration: none;
}

.action-list-group .btn {
  position: absolute;
  right: 5px;
  margin-top: 5px;
  top: 0;
}

如果您使用的是 Sass version of Bootstrap，那么在它说“继承”的地方您可以使用 sass 的 @include 或 @extend 来包含与 Bootstrap 的 .list-group-item > a 相同的样式。