Bootstrap 3: Как сделать гармошку панелей длиной до текста в ней? - PullRequest
Новая
       14

Bootstrap 3: Как сделать гармошку панелей длиной до текста в ней?

0 голосов
/ 20 марта 2019

Это мой код 

<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 строку, выделение будет неправильным, я хочу, чтобы панель действовала как контейнер, которыйвыдвигает на первый план все.

1 Ответ

1 голос
/ 20 марта 2019

Чтобы не связываться с существующим css, вы можете создать новый класс 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>
...