html - Bootstrap 3 : How to make accordion panels as long as the text in it?

Question

这是我的代码

<div class="row"> <!-- start faq -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

              <?php
              $counter = 1;
            foreach ($faqs as  $faq):
            $subcounter = 2;

           ?>

    <div class="panel-heading heading-bkg" role="tab" id="heading-1">
      <h4>
        <a class="subheading" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $counter;?>" aria-expanded="false" aria-controls="collapse-<?php echo $counter;?>">
             <b> <?php echo $faq['subheading'];?> </b> 

        </a>
      </h4>

    </div>


    <div id="collapse-<?php echo $counter;?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-<?php echo $counter;?>">
      <div class="panel-body">

        <?php foreach ($faq['subheadingcontent'] as  $subFaq):?>


            <div class="panel-heading" role="tab" id="heading-<?php echo $counter . '-' .  $subcounter;?>">
              <h1 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-<?php echo $counter;?>" href="#collapse-<?php echo $counter . '-' .  $subcounter;?>" aria-expanded="false" aria-controls="collapse-<?php echo $counter . '-' .  $subcounter;?>">
          <?php echo $subFaq['question']; ?>
                </a>
              </h1>
            </div>

            <div id="collapse-<?php echo $counter . '-' .  $subcounter;?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-<?php echo $counter . '-' .  $subcounter;?>">
              <div class="panel-body">
          <?php echo $subFaq['answer']; ?>
              </div>
              </div>
              <?php
      $subcounter++;
     endforeach;?>
        </div>
        </div>



<?php
$counter++;
 endforeach;?>
</div>
</div> <!-- end faq -->

我想让页眉占用的空间与其内的文本一样多。

<div class="panel-heading heading-bkg" role="tab" id="heading-1">
      <h4>
        <a class="subheading" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $counter;?>" aria-expanded="false" aria-controls="collapse-<?php echo $counter;?>">
             <b> <?php echo $faq['subheading'];?> </b> 

        </a>
      </h4>

    </div>

目前，面板或面板组(我不知道是哪一个)占据了页面的整个宽度。

我不想更改 panel-group 的宽度，因为折叠的段落需要整个页面的宽度，我只想减小面板标题的大小，只要文本，就好像有人突出显示了文本。

如果我想突出显示文本，为什么不对文本应用背景颜色呢？我为什么要更改面板宽度？

因为如果我突出显示文本，并且如果句子不适合 1 行，则突出显示是错误的，我希望面板充当突出显示所有内容的容器。

Answer 1

为了不弄乱现有的 css，您可以使用单个属性 display: table !important; 创建一个新的 css 类，并将该类应用于您想要影响的面板标题。

.heading-short {
  display: table !important;
}

<div class="panel-heading heading-bkg heading-short" role="tab" id="heading-1">
      <h4>
        <a class="subheading" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $counter;?>" aria-expanded="false" aria-controls="collapse-<?php echo $counter;?>">
             <b> <?php echo $faq['subheading'];?> </b> 

        </a>
      </h4>

    </div>