Divs ведут себя беспорядочно. В случае краха и краха в

Question

Если вы заметили бы меня, когда вы нажмете на Bar1, панель пойдет вниз и немного поднимет. Это похоже на мерцание, когда div расширяется. Проверьте код.

Я использовал переключатель, который изначально рушится. Но как только вы нажмете на Bar1, div закроется. И когда вы нажмете на него снова, он упадет и будет немного странным. Подстраивается, как мерцание. Я не могу выяснить, в чем проблема и как это исправить. Пожалуйста, предоставьте некоторую помощь.

<div class="container" id="container"> 
<div class="row" id="header"> <!-- Header --> 
    <div class="col-xs-12" id="logo" data-toggle="collapse" data-target="#main"> 
    ABC<span class="glyphicon glyphicon-menu-down" id="icon" ></span> 
    </div> 
</div> 

<div class="row" id="main"> <!-- Main --> 
    <div class="col-xs-12"> 
    <div class="row mystyle"> <!-- Buttons --> 
     <div class="col-xs-6" id="buttons"> 
     <button id="video-button" class="btn btn-sample btn-block">Detail1</button> 
     </div> 
     <div class="col-xs-6" id="buttons"> 
     <button id="channel-button" class="btn btn-sample btn-block">Detail2</button> 
     </div> 
    </div> 
    </div> 
    <!-- Detail Starts from here! --> 
    <div class="row video-main-style" id="video-detail"> 
    <!-- Name --> 
    <div class="row"> 
     <div class="col-xs-12" id="video-name"> 
     <h1>ABC</h1> 
     </div> 
    </div> 
    <!-- goes here --> 
    <div class="row main-style"> 
     <div class="row" data-toggle="collapse" data-target="#views-compared-data"> 
     <div class="col-xs-12" id="views-compared">Bar1<span class="glyphicon glyphicon-menu-down" id="icon-accord"></span></div> 
     </div> 

     <div class="row" id="views-compared-data"> 
     <div class="col-xs-12"> 
      Some random data<br /> 
      More randomn data<br /> 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

* { 
    margin: 0; 
    padding: 0; 
} 

#container { 
    width: 400px; 
    border:1px solid black; 
} 
#header { 
    background-color: #6C6D70; 
    border-bottom: 5px solid #2DB5AB; 
    height: 50px; 
} 
#logo { 
    padding:10px; 
    font-size: 18px; 
    font-family: sans-serif; 
    font-weight: bold; 
    color: #FFFFFF; 
} 
#arrow-down { 
    color:white; 
    font-size: 18px; 
    padding: 15px 10px 10px 10px; 
    border:0px; 
    font-weight: strong; 
} 
.mystyle{ 
    padding:20px; 
} 

#buttons { 
    padding:0; 
    margin: 0; 

} 
#video-name h1{ 

    font-size: 24px; 
    font-family: sans-serif; 
    font-weight: bold; 
    color: #2DB5AB; 
    padding-left: 20px; 
    margin-top: 0; 
} 

.main-style{ 
    padding: 0px 40px 10px 40px; 
} 

.video-main-style{ 
    padding: 0px 20px 10px 20px; 
} 

#views-compared{ 
    border: 1px solid black; 
    padding: 2px 10px; 
    background: #E6E7E8; 
    color:#6C6D70; 
    font-weight: bold; 
} 

#views-compared-data{ 
    border: 1px solid black; 
    padding: 5px; 
    border-top: 0; 
} 

Заранее спасибо

PS Вот jsFiddle приведенного выше кода.

Answer 1

Предполагая, что вы используете загрузчик, а также, основываясь на ваших имен классов, вы должны добавить класс collase или collapse in (в зависимости от того, хотите ли вы его закрытия или открытия по умолчанию) для вашей строки данных, имеющих данные, как и

<div class="row collapse" id="views-compared-data"> 
... 
</div> 

Поведение, которое вы видите, это добавление класса collapse при первом переключении.

см opened by default и closed by default