如何正确地扩展div?
问题描述:
我在扩展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>
答
,需要在每个配对包装成自己的行: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>
但是当我再次右键菜单上单击它左侧 – None
添加heigt好的,但之前的问题是,下面的div是在右边不是吗?现在已修复。因为每个div都在同一行中,该行将扩展到其最高的孩子的身高,这是预期的行为... –
我知道为什么要这样做,但我可以以某种方式阻止它吗? – None