Аккордеон Внутри карусельного позиционирования Twitter Bootstrap-3

Question

У меня есть аккордеон, который я помещаю внутри карусели, он отлично работает, но я не могу заставить позицию заголовка оставаться, а нижний колонтитул относительный (он толкает вверху, а не открывать вниз), если у кого есть какие-либо подсказки, пожалуйста, дайте мне знать (текст - фиктивный текст и будет заменен, поэтому проигнорируйте это, пожалуйста) Я попытался изменить позицию заголовка на абсолютное, но ничего не делает, и я не вижу ничего относительно элементарное наследование, которое должно быть причиной этого, спасибо!

Bootstrap Библиотека:

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

HTML

 <div class="row"> 
     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> 
       <!-- Indicators --> 
       <ol class="carousel-indicators"> 
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
       <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
       <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
       </ol> 

       <!-- Wrapper for slides --> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="assets/img/a100Logo.png" alt="..."> 
        <div class="carousel-caption"> 
        <p class="headerLightBG">Sample Training Sessions</p> 
        <p class="textLightBG"> 
         Beginning Front-End Web Development<br /> 
         Introduction to Programming<br /> 
         Intermediate Front-End Web Development: Web Applications<br /> 
         Rapid Prototyping and Iterative Development <br /> 
         Advanced Front-End Web Development: Mobile/Responsive Design <br /> 
         Mobile Application Development: iOS/Android <br /> 
        </p> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="assets/img/a100Logo.png" alt="..."> 
        <div class="carousel-caption"> 
         <p class="headerLightBG">Sample Projects</p> 
       <p class="textLightBG"> 
        Write a program that successfully interacts with a commercial API.<br /> 
        Create a dynamic front end for an iPhone or Android app.<br /> 
        Design an engaging new web site for a technology company.<br /> 
        Create a database system for matching Apprentices to Companies.<br /> 
        Create a web application that allows consumers to locate fresh produce nearby.<br /> 
       </p>      </div> 

       </div> 
       <div class="item"> 
        <img src="assets/img/a100Logo.png" alt="..."> 
        <div class="carousel-caption"> 

  <div class="col-lg-6"> 
       <div class= "rightMargin"> 
        <div class="panel-group" id="accordion"> 
         <div class= "panel panel-default"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#FaqCost"> 
           <div class= "panel-heading textLightBG headingColor"> 
            <h4 class="panel-title fatFont"> 
            Does A100 cost me anything? 
            </h4> 

           </div> 
          </a> 
          <div class="panel-collapse collapse" id="FaqCost"> 
           <div class= "panel-body accText textDarkBG"> 
            No! The program is completely free to Apprentices. This is because A100 is an initiative of Independent Software, with support from Connecticut Innovations and our Partner Companies. 
           </div> 
          </div> 
         </div> 

         <div class= "panel panel-default"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#FaqTime"> 
           <div class= "panel-heading textLightBG headingColor"> 
             <h4 class="panel-title fatFont"> 
              What kind of time commitment does A100 require? 
             </h4> 
           </div> 
          </a> 
           <div class="panel-collapse collapse" id="FaqTime"> 
            <div class= "panel-body accText textDarkBG"> 
             The A100 training program requires a commitment of about 10-15 hours per week, including time spent in training sessions. The Program runs 2.5 months and repeats every quarter. Apprentices have been successful in the Program while also maintaining a rigorous academic schedule. A strong work ethic and willingness to learn new things is expected of all Apprentices. 
            </div> 
           </div> 
          </div> 

         <div class= "panel panel-default"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#FaqSchedule"> 
            <div class= "panel-heading textLightBG headingColor"> 
             <h4 class="panel-title fatFont"> 
              What formal meeting times will I have to attend A100 
             </h4> 
            </div> 
           </a> 
           <div class="panel-collapse collapse" id="FaqSchedule"> 
            <div class= "panel-body accText textDarkBG"> 
             <p class="textDarkBG topMarginSmall centered"> 
            While the schedule does change quarterly to suit the needs of the current Cohort, here is a sample schedule that Apprentices in the Spring Cohort of 2014 are expected to adhere to. 

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





        </div> 
       </div> 
      </div> 
      <div class="col-lg-6"> 
       <div class= "leftMargin"> 
        <div class="panel-group" id="accordion2"> 

         <div class= "panel panel-default"> 
          <a data-toggle="collapse" data-parent="#accordion2" href="#FaqFromMe"> 
           <div class= "panel-heading textLightBG headingColor"> 
            <h4 class="panel-title fatFont"> 
             What does A100 want from me? 
            </h4> 
           </div> 
          </a> 
          <div class="panel-collapse collapse" id="FaqFromMe"> 
           <div class= "panel-body accText textDarkBG"> 
            In exchange for the training and opportunities we afford you to connect with local companies (as well as the free food!), we require that you sign an agreement to seek a paid apprenticeship at one of our Partner Companies in the month after graduating from the Program, and that you work there for at least three months. For more info, please read the full Terms and conditions of the Program. 
           </div> 
          </div> 
         </div> 
         <div class= "panel panel-default"> 
          <a data-toggle="collapse" data-parent="#accordion2" href="#FaqSkills"> 
           <div class= "panel-heading textLightBG headingColor"> 
            <h4 class="panel-title fatFont"> 
             How much programming experience do I need to apply? 
            </h4> 
           </div> 
          </a> 
          <div class="panel-collapse collapse" id="FaqSkills"> 
           <div class= "panel-body accText textDarkBG"> 
            Basic programming skills are needed in an object-oriented language of your choice (C++, Java, Python, Scala, Ruby, PHP, etc.), as well as some familiarity with HTML and CSS. Don't worry! We use a programming challenge as part of our application process to make sure everyone begins from a good platform – so you 
           </div> 
          </div> 
         </div> 
         <div class= "panel panel-default"> 
          <a data-toggle="collapse" data-parent="#accordion2" href="#FaqTeach"> 
           <div class= "panel-heading textLightBG headingColor"> 
            <h4 class="panel-title fatFont"> 
             What will A100 teach me? 
            </h4> 
           </div> 
          </a> 
          <div class="panel-collapse collapse" id="FaqTeach"> 
           <div class= "panel-body accText textDarkBG"> 
            A100 will teach you how to create working software products as part of a small development team. You'll learn the LAMP stack (Linux-Apache-MySQL-PHP), as well as improve your front end (HTML/CSS/JavaScript) development skills. We'll also expose you to practices used by working developers from the Connecticut tech 


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


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







      <!-- END OF THE ACCORDION--> 
        </div> 
       </div> 
      </div><!-- carousel inner close--> 
        <!-- Controls --> 
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left"></span> 
        </a> 
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right"></span> 
        </a> 
       </div> 
      </div><!-- carousel close--> 

     </div><!-- row close--> 
    </div><!-- container close--> 
</section> 

CSS:

/* Accordion*/ 
.headingColor:hover 
{ 
    -webkit-transition: color 1s; 
     -moz-transition: color 1s; 
     -ms-transition: color 1s; 
     -o-transition: color 1s; 
     transition: color 1s; 
    color: #777; 
} 
.panel-heading a, 
.panel-heading a:focus, .headingColor { 
    text-decoration: none; 
    color: #006496; 

} 
.accText 
{ 
    Background: #006496; 
} 
.unstyledList 
{ 
    list-style-type: none; 
} 
.fatFont{ 
     font-weight: 600; 
} 

Это часть гораздо более крупного сайта, но это единственный раздел, на который влияет, и аккордеон выглядит так, как будто он отлично работает, когда он не помещен внутри карусели, возможно, это только проблема относительного движения, которое карусель приносит внимание пользователей (я очень новичок в загрузке), если это так, пожалуйста, дайте мне знать, если это невозможно исправить.

спасибо!

Answer 1

панели заголовок и тело необходимо иметь переполнение скрытых уловки сделали им