我正在使用引导程序折叠某些项目菜单。 当项目显示或折叠时，它们似乎跳了起来。我已经尝试过使用.well在此网站上找到多种解决方案，并将margin设置为0px以及将内容嵌套在折叠div内，但是我什么都无法工作。
在合拢时，它在合拢结束时也会发生奇怪的重叠。我也想尝试清理它。
我的代码已附上。目前只有第一个按钮“ Automation Projects”会导致崩溃（请忽略我试图使外观正确的重复代码，稍后将填充内容）。
有人可以帮助我消除我的代码跳跃问题吗？谢谢。
* {
margin: 0;
padding: 0;
}
.collapse
{
display:none;
}
.collapse.show
{
display:block;
}
tr.collapse.show
{
display:table-row;
}
tbody.collapse.show
{
display:table-row-group;
}
.collapsing
{
position:relative;
height:0;
overflow:hidden;
transition: .35s ease;
}
.collapse.in
{
display: block;
}
#hexGrid {
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 0 auto;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 15px;
list-style-type: none;
}
.hex {
position: relative;
visibility:hidden;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hex_sub {
position: relative;
visibility:hidden;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hex::after{
content:'';
display:block;
padding-bottom: 86.602%; /* = 100 / tan(60) * 1.5 */
}
.hex_sub::after{
content:'';
display:block;
padding-bottom: 86.602%; /* = 100 / tan(60) * 1.5 */
}
.hexIn{
position: absolute;
width:96%;
padding-bottom: 110.851%; /* = width / sin(60) */
margin:0 2%;
overflow: hidden;
visibility: hidden;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
-webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
-ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
.hexIn * {
position: absolute;
visibility: visible;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexLink {
display:block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
border: none;
background-size: cover;
-webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
-ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}
.newline {
margin-left: 16.666%;
}
/*** HEX CONTENT **********************************************************************/
.hex img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
-webkit-transform: rotate3d(0,0,0,0deg);
-ms-transform: rotate3d(0,0,0,0deg);
transform: rotate3d(0,0,0,0deg);
}
.hex_sub img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
-webkit-transform: rotate3d(0,0,0,0deg);
-ms-transform: rotate3d(0,0,0,0deg);
transform: rotate3d(0,0,0,0deg);
}
.hex h1, .hex p {
width: 100%;
padding: 5%;
box-sizing:border-box;
background-color: rgba(0, 66, 122, 0.8);
font-weight: 300;
-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s ease-out;
-ms-transition: top .2s ease-out, bottom .2s ease-out, .2s ease-out;
transition: top .2s ease-out, bottom .2s ease-out, .2s ease-out;
}
.hex_sub h1, .hex_sub p {
width: 100%;
padding: 5%;
box-sizing:border-box;
background-color: rgba(0, 121, 194, 0.8);
font-weight: 300;
-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s ease-out;
-ms-transition: top .2s ease-out, bottom .2s ease-out, .2s ease-out;
transition: top .2s ease-out, bottom .2s ease-out, .2s ease-out;
}
.holder {
background-color: rgba(0, 121, 194, 0.4);
}
.hex h1 {
bottom: 50%;
padding-top:50%;
font-size: 2em;
color: #FFF;
z-index: 1;
-webkit-transform:translate3d(0,-100%,0);
-ms-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0);
}
.hex_sub h1 {
bottom: 50%;
padding-top:50%;
font-size: 2em;
color: #FFF;
z-index: 1;
-webkit-transform:translate3d(0,-100%,0);
-ms-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0);
}
.hex h1::after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
width: 10%;
text-align: center;
border-bottom: 1px solid #fff;
}
.hex_sub h1::after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
width: 10%;
text-align: center;
border-bottom: 1px solid #fff;
}
.hex p {
top: 50%;
color: #FFF;
padding-bottom:50%;
-webkit-transform:translate3d(0,100%,0);
-ms-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0);
}
.hex_sub p {
top: 50%;
color: #FFF;
padding-bottom:50%;
-webkit-transform:translate3d(0,100%,0);
-ms-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0);
}
/*** HOVER EFFECT **********************************************************************/
.hexLink:hover h1, .hexLink:focus h1,
.hexLink:hover p, .hexLink:focus p{
-webkit-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width:1201px) { /* <- 5-4 hexagons per row */
#hexGrid{
padding-bottom: 7.4%
}
.hex {
width: 33.333%; /* = 100 / 3 */
}
.hex_sub {
width: 33.333%; /* = 100 / 3 */
}
}
@media (max-width: 1200px) and (min-width:901px) { /* <- 4-3 hexagons per row */
#hexGrid{
padding-bottom: 7.4%
}
.hex {
width: 33.333%; /* = 100 / 3 */
}
.hex_sub {
width: 33.333%; /* = 100 / 3 */
}
}
@media (max-width: 900px) and (min-width:601px) { /* <- 3-2 hexagons per row */
#hexGrid{
padding-bottom: 7.4%
}
.hex {
width: 33.333%; /* = 100 / 3 */
}
.hex_sub {
width: 33.333%; /* = 100 / 3 */
}
}
@media (max-width: 600px) { /* <- 2-1 hexagons per row */
#hexGrid{
padding-bottom: 11.2%
}
.hex {
width: 50%; /* = 100 / 3 */
}
.hex_sub {
width: 50%; /* = 100 / 3 */
}
}
@media (max-width: 400px) {
#hexGrid {
font-size: 13px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700|PT+Sans' rel='stylesheet' type='text/css'>
<div class="proj_container">
<ul id="hexGrid">
<li class="hex">
<div class="hexIn">
<button class="hexLink" data-target="#auto_sub, #auto_sub1, #auto_sub2, #auto_sub3, #auto_sub4, #auto_sub5, #auto_sub6, #auto_sub7, #auto_sub8" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/auto.gif)">
<h1>Automation Projects</h1>
<p>Give synopsis of Automation Projects</p>
</button>
</div>
</li>
<li id="auto_sub" class="hex collapse">
<div class="hexIn">
<a class="hexLink holder" href="">
</a>
</div>
</li>
<li id="auto_sub1" class="hex collapse">
<div class="hexIn">
<a class="hexLink holder" href="">
</a>
</div>
</li>
<li id="auto_sub2" class="hex_sub collapse newline">
<div class="hexIn">
<button class="hexLink" data-target="#project5" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/auto.gif)">
<h1>Automation Projects</h1>
<p>Give synopsis of Automation Projects</p>
</button>
</div>
</li>
<li id="auto_sub3" class="hex_sub collapse">
<div class="hexIn">
<button class="hexLink" data-target="#project5" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/chute.gif)">
<h1>Transfer Chute Design</h1>
<p>Some sample text about the article this hexagon leads to</p>
</button>
</div>
</li>
<li id="auto_sub4" class="hex_sub collapse">
<div class="hexIn">
<button class="hexLink" data-target="#project5" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/eng.gif)">
<h1>Engineered Plant Improvements</h1>
<p>Some sample text about the article this hexagon leads to</p>
</button>
</div>
</li>
<li id="auto_sub5" class="hex_sub collapse">
<div class="hexIn">
<button class="hexLink" data-target="#project5" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/fail.gif)">
<h1>Failure Investigation</h1>
<p>Some sample text about the article this hexagon leads to</p>
</button>
</div>
</li>
<li id="auto_sub6" class="hex_sub collapse">
<div class="hexIn">
<button class="hexLink" data-target="#project5" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/insp.gif)">
<h1>Balance Machine Inspections</h1>
<p>Some sample text about the article this hexagon leads to</p>
</button>
</div>
</li>
<li id="auto_sub7" class="hex_sub collapse newline">
<div class="hexIn">
<button class="hexLink" data-target="#project5" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/maint.gif)">
<h1>Maintenance Aids</h1>
<p>Some sample text about the article this hexagon leads to</p>
</button>
</div>
</li>
<li id="auto_sub8" class="hex_sub collapse">
<div class="hexIn">
<button class="hexLink" data-target="#project5" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/repair.gif)">
<h1>Engineered Plant Repairs</h1>
<p>Some sample text about the article this hexagon leads to</p>
</button>
</div>
</li>
<li id="auto_sub1" class="hex collapse">
<div class="hexIn">
<a class="hexLink holder" href="">
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<button class="hexLink" data-target="#project5" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/chute.gif)">
<h1>Transfer Chute Design</h1>
<p>Some sample text about the article this hexagon leads to</p>
</button>
</div>
</li>
<li class="hex">
<div class="hexIn">
<button class="hexLink" data-target="#project5" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/eng.gif)">
<h1>Engineered Plant Improvements</h1>
<p>Some sample text about the article this hexagon leads to</p>
</button>
</div>
</li>
<li class="hex newline">
<div class="hexIn">
<button class="hexLink" data-target="#project5" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/fail.gif)">
<h1>Failure Investigation</h1>
<p>Some sample text about the article this hexagon leads to</p>
</button>
</div>
</li>
<li class="hex">
<div class="hexIn">
<button class="hexLink" data-target="#project5" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/insp.gif)">
<h1>Balance Machine Inspections</h1>
<p>Some sample text about the article this hexagon leads to</p>
</button>
</div>
</li>
<li class="hex">
<div class="hexIn">
<button class="hexLink" data-target="#project5" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/maint.gif)">
<h1>Maintenance Aids</h1>
<p>Some sample text about the article this hexagon leads to</p>
</button>
</div>
</li>
<li class="hex">
<div class="hexIn">
<button class="hexLink" data-target="#project5" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/repair.gif)">
<h1>Engineered Plant Repairs</h1>
<p>Some sample text about the article this hexagon leads to</p>
</button>
</div>
</li>
<li class="hex">
<div class="hexIn">
<button class="hexLink" data-target="#project5" data-toggle="collapse" type="button" style="background-image:url(www.cabs-pl.com.au/images/projects/project_topics/wc.gif)">
<h1>Water Cannons</h1>
<p>Some sample text about the article this hexagon leads to</p>
</button>
</div>
</li>
</ul>
</div>