并排的自举面板 - 切换时无法排列面板标题

Question

我将我的自举面板水平并排放置，就像这样。我刚申请＆＃34;显示：inline-block＆＃34;到.panel类，否则这些面板标题都默认为＆＃34; block＆＃34;行为，只是垂直排列，占用四行。我希望它保持这种方式，一排水平。

单击其中一个面板标题时会出现问题。我添加了一个＆＃34;光标：指针＆＃34;到标题，它会在点击时提示＆＃34;折叠（＆＃34;切换＆＃34;）。

而不是在面板标题下弹出面板主体内容，所有其他面板标题向下滑动并向外滚动页面，因此我必须手动向下移动滚动条以查看其他面板标题。这真的很糟糕。我怎样才能将面板标题留在那里，只让面板体内容从下面滑下来？

除了默认的Bootstrap js之外，我还没有添加很多自定义JavaScript。 我的代码在下面

<div class="panel-group" id="accordion">
           <!--COLLAPSIBLE PANELS START HERE -->
      <div id="CollapsiblePanel1" class="panel panel-default">
      <div href="#collapseOne" class="panel-heading" id="p1">
         <h4 class="panel-title">
               <i class="glyphicon glyphicon-flash"></i> TECHNOLOGY
         </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse">
         <div class="panel-body" id="body1">
                   <p>BLAH BLAH BLAH BLAH </p>

         </div>
      </div>
   </div>
   <div id="CollapsiblePanel2" class="panel panel-default">
      <div href="#collapseTwo" class="panel-heading" id="p2">
         <h4 class="panel-title">
               <i class="glyphicon glyphicon-book"></i> EDUCATION
         </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
                   <p>BLAH BLAH BLAH BLAH </p>

        </div>
     </div>
   </div>
   <div id="CollapsiblePanel3" class="panel panel-default">
      <div href="#collapseThree" class="panel-heading" id="p3">
         <h4 class="panel-title">
               <i class="glyphicon glyphicon-tasks"></i> EXPERIENCE
         </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
         <div class="panel-body">
                <p>BLAH BLAH BLAH BLAH </p>

         </div>
      </div>
   </div>
   <div id="CollapsiblePanel4" class="panel panel-default">
      <div href="#collapseFour" class="panel-heading" id="p4">
         <h4 class="panel-title">
               <i class='glyphicon glyphicon-eye-open'></i> VISION
         </h4>
      </div>
      <div id="collapseFour" class="panel-collapse collapse">
         <div class="panel-body">
      <p>BLAH BLAH BLAH BLAH </p>
         </div>
      </div>
     </div>
    </div> <!-- /bodyContent -->  

Answer 1

通过使类'面板'位置解决：绝对。这是一种丑陋的解决方案，但只要面板彼此不相关，当打开或关闭时它们就不会甩开。用'绝对'你我猜想（因为我讨厌绝对定位）选择你的毒药