如何修复我的自举手风琴才能正常运行？

Question

我有一个accordion，当我点击“查看报告”时，我的一个跨度是作为我的面板体的一部分扩展了大约3秒然后它消失了。

好奇......？

我不确定为什么会这样做。

点击here查看 - 我在说什么。

我试图检查Chrome上的元素，我无法弄清楚是什么导致该DOM或哪个DOM？

任何人都可以解释为什么会这样 - 并帮助我摆脱它？

CODE

<style type="text/css">

 .panel {
  border-radius: 0px !important;
  background-color: #4D8FCB;
  color: white;
  margin-left: 25px;
  margin-right: 25px;

}

.panel-heading {
  height: 114px;

}

.panel-body {
  font-size: 10px;
  background-color: white;
}


.sa-h1 {
  color: white;
  font-size: 39px;
  font-weight: bold;
  font-style: normal;
  font-family: "adelle-sans", sans-serif;
}

.sa-h2{
  font-size: 28px;
}

.sa-h3{
  font-size: 16px;
}
.sa-h4{
  font-size: 14px;
}

.sa-h5{
  font-size: 12px;
}

.sa-h6{
  font-size: 10px;
}


.sa-right-items{
  float: left;
  /*line-height: 114px;*/
}

.sa-answer, .sa-score, .sa-review, .sa-report, .sa-hide {
  vertical-align: middle;
  display: inline-block;
  padding: 5px 22px;
}

.sa-hide-btn, .sa-report-btn {
  cursor: pointer;
}


</style>


<br><br>

<div class="row student-accordion ">
  <div class="col-md-12">
    <div class="panel-group" id="accordion">
      <div class="panel">
        <div class="row panel-heading">
          <div class="panel-title">

           <div class="col-xs-1 col-sm-1">

            <p><span class="sa-h5">SECTION</span>
              <br>
              <span class="sa-h1">2.2</span>
              <br><span class="sa-h5">EXERCISE</span>
            </p>
          </div>


          <!-- Title -->
          <div class="col-xs-6 col-sm-6 col-lg-6">
            <span class="sa-h3">Section Exercise 2.2</span><br>
            <span class="sa-h5">ALGEBRA 1</span> <br>
            <span class="sa-h4">02/09/2015</span>

          </div>

          <!-- Answers -->
          <div class="sa-right-items text-center">
           <span class="sa-answer">
            <span> <span class="sa-h2">11/25</span> <br> <span class="sa-h6">ITEMS ANSWERED <br> CORRECTLY</span> </span>
          </span>


          <!-- Score -->
          <span class="sa-score">
           <span> <span class="sa-h2">44%</span> <br> <span class="sa-h6">SCORE</span> </span>
         </span>


         <!-- Review -->
         <span class="sa-review">
          <img width="40px" src="/BIM/resources/images/icons-report/review_white.png"><br>
          <span> <span class="sa-h6">REVIEW</span> </span>
        </span>


        <!-- Report -->
        <span class="sa-report">
          <span  data-toggle="collapse" data-parent="#accordion" href="#student-accordion-collapse" aria-expanded="true"  class="pull-right">
            <img class="sa-report-btn" width="40px" src="/BIM/resources/images/icons-report/report_white.png"><br>
            <span><span class="sa-h6 sa-report-btn">VIEW REPORT</span></span>
          </span>
        </span>

        <!-- Report -->
        <span class="sa-hide hidden">
          <span  data-toggle="collapse" data-parent="#accordion" href="#student-accordion-collapse" aria-expanded="true"  class="pull-right">
            <img class="sa-hide-btn" width="40px" src="/BIM/resources/images/icons-report/hidedetails_white.png"><br>
           <span><span class="sa-h6 sa-hide-btn">HIDE DETAILS</span></span>
          </span>
        </span>


      </div>
    </div>


  </div>
  <div id="student-accordion-collapse" class="panel-collapse collapse">
    <div class="panel-body">

     <p style="color:red;"> RED </p>

   </div>
 </div>
</div>

</div>
</div>
</div>

JSFiddle

Answer 1

我对您的标记做了一点改动，只是将p更改为div：

HTML中的变化：

<div> <!-- changed this p tag to div -->
    <span class="sa-h5">SECTION</span>
    <br>
    <span class="sa-h1">2.2</span>
    <br><span class="sa-h5">EXERCISE</span>
</div>

MrAxel's solution

观察到的原因：由于p margin: 0 0 10px;的引导默认css，这会导致问题。如果您将margin: 0px提供给p标记，那么您的代码也可以完美运行。如下面的示例

<p style="margin:0px">
    <span class="sa-h5">SECTION</span>
    <br>
    <span class="sa-h1">2.2</span>
    <br>
    <span class="sa-h5">EXERCISE</span>
</p> 

--Working DEMO--

Answer 2

您的.panel-heading课程需要更多身高。左侧的.col-md-1列高于行的其余部分，导致“RED”段落向右侧。

因此解决此问题的一种方法是：而不是height: 114px;类上的.panel-heading，要么将其完全删除，要么将其设置为更高的值。

Answer 3

为什么在标记之间没有段落时使用段落<p>标记。开玩笑！

只需将<p>代码替换为<div>，您就可以了。请参考以下代码：

更改此内容：

<p>
  <span class="sa-h5">SECTION</span>
  <br>
  <span class="sa-h1">2.2</span>
  <br>
  <span class="sa-h5">EXERCISE</span>
</p>

对此：

<div>
  <span class="sa-h5">SECTION</span>
  <br>
  <span class="sa-h1">2.2</span>
  <br>
  <span class="sa-h5">EXERCISE</span>
</div>

<强> FIDDLE