用于折叠 div 并对齐图像和文本的按钮

Question

全部，

在 bootstrap3 中，我使用按钮来折叠 div，我有一个图像和文本，并在以下之间交替：

+ More
- Less

但是图像与文本未对齐。有没有办法在内容：按钮中对齐图像和测试？

HTML

<button  class="btn btn-link collapsed" 
                    data-toggle="collapse"    
                    data-target="#collapseMoreDetails">
 
</button>

CSS

button.btn.collapsed:before
{
  content: url('plusImage.svg') " More" ; 
 
}
button.btn:before {
  content: url('minusImage.svg' ) " Less" ; 

Answer 1

我发现我可以使用引导程序，一切都完美对齐

html

<a class="btn btn-link text-toogle" data-toggle="collapse" data-target="#collapseMoreDetails" aria-expanded="false">

<span class="text-collapsed"> <span class="glyphicon glyphicon-plus-sign"></span> More Details</span>
<span class="text-expanded">  <span class="glyphicon glyphicon-minus-sign"></span> Less Details</span>

</a>

CSS

.text-toogle[aria-expanded=false] .text-expanded {
  display: none;
}
.text-toogle[aria-expanded=true] .text-collapsed {
  display: none;
}