Folks!
I'm trying to use collapse panels inside a modal but, when I click on it, the modal's layout become broken, including the second panel.
Here's the code:
`
<div id="precos" class="modal fade topo" role="dialog">
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Preços</h4>
<ul class='nav nav-tabs nav-justified' id='Precos_tab' data-tabs='tabs'>
<li role='presentation' class='active'><a href="#" data-target="#temporada" data-toggle="tab">Temporada</a></li>
<li role='presentation'><a href="#" data-target="#baixa" data-toggle="tab">Baixa Temporada</a></li>
<li role='presentation'><a href="#" data-target="#natal" data-toggle="tab">Natal</a></li>
<li role='presentation'><a href="#" data-target="#ano_novo" data-toggle="tab">Ano Novo</a></li>
</ul>
</div>
<div class="modal-body">
<div class='tab-content' id='minhas-tabs'>
<div class='tab-pane active' id="temporada">
<div class='panel-group' id="#ValorTemporada">
<div class='panel panel-default'>
<div class='panel-heading'>
<a href="#ValorTemporada" data-target='#PilotisTemp' data-toggle='collapse' data-parent='#ValorTemporada'>
<h3 class='panel-title'>
<i class='glyphicon glyphicon-chevron-right'></i>
Pilotis
</h3>
</a>
</div>
<div class='panel-collapse collapse' id='PilotisTemp'>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Vagas de Carro</span>
</div>
<div class='col-md-3 desc_pack'>
02
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Mínimo de Hóspedes</span>
</div>
<div class='col-md-3 desc_pack'>
06
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Máximo de Hóspedes</span>
</div>
<div class='col-md-3 desc_pack'>
10
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-7 tipo_desc'>
<span class='titulo'>Valor Associados</span>
</div>
<div class='col-md-5 desc_pack'>
R$ 65,00
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-7 tipo_desc'>
<span class='titulo'>Não Associado</span>
</div>
<div class='col-md-5 desc_pack'>
Indisponível
</div>
</div>
</div>
</div>
<div class='panel panel-default'>
<div class='panel-heading'>
<a href="#ValorTemporada" data-target='#CasaTemp' data-toggle='collapse' data-parent='#ValorTemporada'>
<h3 class='panel-title'>
<i class='glyphicon glyphicon-chevron-right'></i>
Casa
</h3>
</a>
</div>
<div class='panel-collapse collapse' id='CasaTemp'>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Vagas de Carro</span>
</div>
<div class='col-md-3 desc_pack'>
02
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Mínimo de Hóspedes</span>
</div>
<div class='col-md-3 desc_pack'>
06
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Máximo de Hóspedes</span>
</div>
<div class='col-md-3 desc_pack'>
10
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-7 tipo_desc'>
<span class='titulo'>Valor Associados</span>
</div>
<div class='col-md-5 desc_pack'>
R$ 35,00
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-7 tipo_desc'>
<span class='titulo'>Não Associado</span>
</div>
<div class='col-md-5 desc_pack'>
R$ 58,00
</div>
</div>
</div>
</div>
</div>
</div>
<div class='tab-pane fade' id="baixa">
baixa
</div>
<div class='tab-pane fade' id="natal">
natal
</div>
<div class='tab-pane fade' id="ano_novo">
ano novo
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
`
What i'm doing wrong?
I've tried the "row" class and "col-md-*" class but nothing worked.
答案 0 :(得分：0)
Use the following code... or simply replace the panel-collapse class with panel-body
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#precos">click me</button>
<div id="precos" class="modal fade topo" role="dialog">
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Preços</h4>
<ul class='nav nav-tabs nav-justified' id='Precos_tab' data-tabs='tabs'>
<li role='presentation' class='active'><a href="#" data-target="#temporada" data-toggle="tab">Temporada</a></li>
<li role='presentation'><a href="#" data-target="#baixa" data-toggle="tab">Baixa Temporada</a></li>
<li role='presentation'><a href="#" data-target="#natal" data-toggle="tab">Natal</a></li>
<li role='presentation'><a href="#" data-target="#ano_novo" data-toggle="tab">Ano Novo</a></li>
</ul>
</div>
<div class="modal-body">
<div class='tab-content' id='minhas-tabs'>
<div class='tab-pane active' id="temporada">
<div class='panel-group' id="#ValorTemporada">
<div class='panel panel-default'>
<div class='panel-heading' data-target='#PilotisTemp' data-toggle='collapse'>
<a href="#">
<h3 class='panel-title'>
<i class='glyphicon glyphicon-chevron-right'></i>
Pilotis
</h3>
</a>
</div>
<div class='panel-body collapse' id='PilotisTemp'>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Vagas de Carro</span>
</div>
<div class='col-md-3 desc_pack'>
02
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Mínimo de Hóspedes</span>
</div>
<div class='col-md-3 desc_pack'>
06
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Máximo de Hóspedes</span>
</div>
<div class='col-md-3 desc_pack'>
10
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-7 tipo_desc'>
<span class='titulo'>Valor Associados</span>
</div>
<div class='col-md-5 desc_pack'>
R$ 65,00
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-7 tipo_desc'>
<span class='titulo'>Não Associado</span>
</div>
<div class='col-md-5 desc_pack'>
Indisponível
</div>
</div>
</div>
</div>
<div class='panel panel-default'>
<div class='panel-heading' data-target='#CasaTemp' data-toggle='collapse'>
<a href="#">
<h3 class='panel-title'>
<i class='glyphicon glyphicon-chevron-right'></i>
Casa
</h3>
</a>
</div>
<div class='panel-body collapse' id='CasaTemp'>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Vagas de Carro</span>
</div>
<div class='col-md-3 desc_pack'>
02
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Mínimo de Hóspedes</span>
</div>
<div class='col-md-3 desc_pack'>
06
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-9 tipo_desc'>
<span class='titulo'>Máximo de Hóspedes</span>
</div>
<div class='col-md-3 desc_pack'>
10
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-7 tipo_desc'>
<span class='titulo'>Valor Associados</span>
</div>
<div class='col-md-5 desc_pack'>
R$ 35,00
</div>
</div>
<div class='col-xs-6 col-md-6'>
<div class='col-md-7 tipo_desc'>
<span class='titulo'>Não Associado</span>
</div>
<div class='col-md-5 desc_pack'>
R$ 58,00
</div>
</div>
</div>
</div>
</div>
</div>
<div class='tab-pane fade' id="baixa">
baixa
</div>
<div class='tab-pane fade' id="natal">
natal
</div>
<div class='tab-pane fade' id="ano_novo">
ano novo
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I hope this helps