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

Question

This is my code

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

I would like to make the header takes as much space as the text within it.

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

currently the panel, or the panel-group, I don't know which, takes the full width of the page.

I don't want to change the width of panel-group since the collapsed paragraphs need the full width of the page, I just want the panel-heading size to decrease, be as long as the text, as if someone highlighted the text.

If I want to highlight the text, why not apply background-color to the text? Why would I want to change the panel width?

Because if I highlight the text, and if the sentence does not fit on 1 line, the highlight would be wrong, I want the panel to act as a containter that highlights everything.

Answer 1

So as not to mess with the existing css, you can create a new css class with the single property display: table !important; and apply that class to the panel-headings you want affected.

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