Bootstrap 3：如何制作手风琴面板，只要输入其中的文字？

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类display: table !important; 并将该类应用于您想要影响的面板标题。

 .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>