如何在 Bootstrap 4 列表组项中包含两个链接

Answer 1

将信息图标移到按钮之外。您同时单击了按钮和信息图标，因此您会遇到问题。

为了确保它仍然是一个

list-group-item

，将所有内容包装在 div 中。并将图标放置在您想要的位置。按钮周围的

div

必须是

position: relative

才能正常工作。

  <div class="list-group">
    <div class="position-relative">
      <a class="fa fa-info-circle text-secondary position-absolute" data-memberid="123" data-toggle="modal" data-target="#history-modal" data-name="Peter Haworth" style="font-size:20px; z-index: 10; top: 10px; right: 10px"></a>
      <button type="button" class="list-group-item list-group-item-action" data-id="123" data-toggle="modal" data-target="#membership-modal">
        <span class="font-weight-bold">Peter Haworth</span>
        <p>1 year Individual, expiration 12/31/2023</p>
      </button>
    </div>
  </div>

参见 jsfiddle 示例