2016-01-13 2 views
-1

У меня проблема при расширении div. Когда я расширяю меню с левой стороны, один элемент перемещается в правую сторону, и когда я расширяю div на правой стороне, он также расширяет мою левую сторону. Как я могу это остановить? Это моя скрипка: https://jsfiddle.net/LLkaj4h0/7/Как правильно расширить div?

<div class="col-md-12 col-sm-12"> 
    <div class="panel-group row" id="accordion" role="tablist" aria-multiselectable="true"> 

    <div class="panel panel-default col-md-6 col-sm-6"> 
    <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title"> 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
      1. Finansijski menadžment <i class="indicator fa fa-angle-down pull-right"></i> 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> 
     <ul class="expand-details"> 
      <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li> 
      <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default col-md-6 col-sm-6"> 
    <div class="panel-heading" role="tab" id="headingFive"> 
     <h4 class="panel-title"> 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> 
      2. Javne finansije - budžet i trezor <i class="indicator fa fa-angle-down pull-right"></i> 
     </a> 
     </h4> 
    </div> 
    <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> 
     <div class="panel-body"> 
     <ul class="expand-details"> 
      <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li> 
      <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default col-md-6 col-sm-6"> 
    <div class="panel-heading" role="tab" id="headingTwo"> 
     <h4 class="panel-title"> 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
      3. Računovodstveno savjetovanje <i class="indicator fa fa-angle-down pull-right"></i> 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="panel-body"> 
     <ul class="expand-details"> 
      <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li> 
      <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default col-md-6 col-sm-6"> 
    <div class="panel-heading" role="tab" id="headingSix"> 
     <h4 class="panel-title"> 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix"> 
      4. Korporativno - poslovno pravo <i class="indicator fa fa-angle-down pull-right"></i> 
     </a> 
     </h4> 
    </div> 
    <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix"> 
     <div class="panel-body"> 
     <ul class="expand-details"> 
      <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li> 
      <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default col-md-6 col-sm-6"> 
    <div class="panel-heading" role="tab" id="headingThree"> 
     <h4 class="panel-title"> 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
      5. Porezno savjetovanje <i class="indicator fa fa-angle-down pull-right"></i> 
     </a> 
     </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
     <div class="panel-body"> 
     <ul class="expand-details"> 
      <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li> 
      <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li> 
     </ul> 
     </div> 
    </div> 
    </div> 


    <div class="panel panel-default col-md-6 col-sm-6"> 
    <div class="panel-heading" role="tab" id="headingSeven"> 
     <h4 class="panel-title"> 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven"> 
      6. EU fondovi <i class="indicator fa fa-angle-down pull-right"></i> 
     </a> 
     </h4> 
    </div> 
    <div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven"> 
     <div class="panel-body"> 
     <ul class="expand-details"> 
      <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li> 
      <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default col-md-6 col-sm-6"> 
    <div class="panel-heading" role="tab" id="headingFour"> 
     <h4 class="panel-title"> 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> 
      7. Usaglašavanje zakonodavstva sa pravom Evropske unije <i class="indicator fa fa-angle-down pull-right"></i> 
     </a> 
     </h4> 
    </div> 
    <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> 
     <div class="panel-body"> 
     <ul class="expand-details"> 
      <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li> 
      <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 

ответ

0

Вам нужно обернуть каждое спаривание в отдельную строку: https://jsfiddle.net/LLkaj4h0/8/

<div class="col-md-12 col-sm-12"> 
    <div class="panel-group row" id="accordion" role="tablist" aria-multiselectable="true"> 

    <div class="panel panel-default col-md-6 col-sm-6"> 
    <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title"> 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
      1. Finansijski menadžment <i class="indicator fa fa-angle-down pull-right"></i> 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> 
     <ul class="expand-details"> 
      <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li> 
      <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default col-md-6 col-sm-6"> 
    <div class="panel-heading" role="tab" id="headingFive"> 
     <h4 class="panel-title"> 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> 
      2. Javne finansije - budžet i trezor <i class="indicator fa fa-angle-down pull-right"></i> 
     </a> 
     </h4> 
    </div> 
    <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> 
     <div class="panel-body"> 
     <ul class="expand-details"> 
      <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li> 
      <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    </div> 
    <div class="panel-group row" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default col-md-6 col-sm-6"> 
    <div class="panel-heading" role="tab" id="headingTwo"> 
     <h4 class="panel-title"> 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
      3. Računovodstveno savjetovanje <i class="indicator fa fa-angle-down pull-right"></i> 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="panel-body"> 
     <ul class="expand-details"> 
      <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li> 
      <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default col-md-6 col-sm-6"> 
    <div class="panel-heading" role="tab" id="headingSix"> 
     <h4 class="panel-title"> 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix"> 
      4. Korporativno - poslovno pravo <i class="indicator fa fa-angle-down pull-right"></i> 
     </a> 
     </h4> 
    </div> 
    <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix"> 
     <div class="panel-body"> 
     <ul class="expand-details"> 
      <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li> 
      <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    </div> 
    <div class="panel-group row" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default col-md-6 col-sm-6"> 
    <div class="panel-heading" role="tab" id="headingThree"> 
     <h4 class="panel-title"> 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
      5. Porezno savjetovanje <i class="indicator fa fa-angle-down pull-right"></i> 
     </a> 
     </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
     <div class="panel-body"> 
     <ul class="expand-details"> 
      <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li> 
      <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li> 
     </ul> 
     </div> 
    </div> 
    </div> 


    <div class="panel panel-default col-md-6 col-sm-6"> 
    <div class="panel-heading" role="tab" id="headingSeven"> 
     <h4 class="panel-title"> 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven"> 
      6. EU fondovi <i class="indicator fa fa-angle-down pull-right"></i> 
     </a> 
     </h4> 
    </div> 
    <div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven"> 
     <div class="panel-body"> 
     <ul class="expand-details"> 
      <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li> 
      <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    </div> 
    <div class="panel-group row" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default col-md-6 col-sm-6"> 
    <div class="panel-heading" role="tab" id="headingFour"> 
     <h4 class="panel-title"> 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> 
      7. Usaglašavanje zakonodavstva sa pravom Evropske unije <i class="indicator fa fa-angle-down pull-right"></i> 
     </a> 
     </h4> 
    </div> 
    <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> 
     <div class="panel-body"> 
     <ul class="expand-details"> 
      <li>posebni konsalting po zahtjevima manje složenosti, po ugovoru</li> 
      <li>posebni konsalting projekti po zahtevima veće složenosti, po ugovoru</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    </div> 
</div> 
</div> 
+0

но еще раз, когда я нажимаю на меню правой кнопки Добавить heigt на левой стороне – None

+0

Хорошо, но проблема была в том, что нижеприведенный div был справа, не так ли? Теперь это исправлено. Поскольку каждый из div находится в одной строке, строка будет расширяться до высоты самого высокого его дочернего элемента, это ожидаемое поведение ... –

+0

Я знаю, почему это делается, но могу ли я как-то остановить это? – None

Смежные вопросы