引导列表-组-项目显示

Question

我有一个与 Bootstraps 列表组类一起显示的链接列表。我正在尝试向其中一个链接添加一个很棒的字体图标。我有 jquery 代码，当它被点击时会改变图标。问题是，如果我在链接中添加一个跨度来保存图标，则该图标将显示在下一行。我发现这是由于 display:block 行。如果我删除它，该图标将显示在与链接相同的行上，但链接的整体格式会失去列表组的外观。这是我的jsfiddle。您可以看到 stock 类的第一个 div 在下一行显示图标，而我的类在一行显示图标。

我不知道如何使用 jsfiddle 来显示链接的实际外观，但我希望这不会影响答案。有没有办法让它工作，或者我应该更改图标代码以使用带有 javascript 函数的 onclick？

    <style>
    .my-list-group-item {
     position: relative;
     /*display: block;*/
     padding: 0px 15px; /* adjust here */
     margin-bottom: -1px;
     border: 1px solid #ddd;
     line-height: 1em /* set to text height */
    }
    </style>

    <div class="list-group list-group-flush">
    <div>
    <a class="list-group-item list-group-item-action" href="example.com">Link 1</a>
    <span class="more far fa-thumbs-down" id="parent-1"></span>
    </div>

    <div>
    <a class="my-list-group-item-action" href="example.com">Link 1</a>
    <span class="more far fa-thumbs-down" id="parent-2"></span>
    </div>
    </div>

    <script>
    $(".more").click(function() {  

     var id = this.id;
     $("#"+id).toggleClass('fa-thumbs-up fa-thumbs-down'); 
    });
    </script>

Answer 1

您的代码中的一切都很好，一切都与设计有关。所以我为你找到了两种方法：

1-在标签中发送跨度标签：

$(".more").click(function() {  
 
 var id = this.id;
 $("#"+id).toggleClass('fa-thumbs-up fa-thumbs-down'); 
 
});

.float-left {
  float: left;
}
.cen {
  height: 100% !important;
  padding : 5px;
  padding-left : 0 !important;
} 

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group list-group-flush"> 
<a class=" list-group-item list-group-item-action" href='#'>Link 1
<span class="cen more far fa-thumbs-down float-left mr-1" id="parent-1"></span>
</a>
</div>

2-i 使用 z-index 和负边距：

$(".more").click(function() {  
 
 var id = this.id;
 $("#"+id).toggleClass('fa-thumbs-up fa-thumbs-down'); 
 
});

span {
  margin-top : -30px !important;
  z-index : 1;
  padding-left : 10px;
  width : 0 !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group list-group-flush"> 
<a class=" list-group-item list-group-item-action" href='#'>Link 1</a>
<span class="cen more far fa-thumbs-down float-left mr-1" id="parent-2">

</span>
</div>

我希望它可以解决您的问题，或者给您一个想法。