问题
The following jsfiddle has two collapse panels. However, when each window is expanded and collapsed, the animation is awkward and not fluid--it expands larger than it needs to at first, with the input fields contained therein not visible, and then the input fields appear suddenly.
https://jsfiddle.net/6pmsp9ou/
This only appears to happen when the window is above a certain width. If the viewing window is made less wide, it expands normally. This can be seen in the jsfiddle, as it appears to expand and collapse normally at the default width, but if you widen the viewing window, then the behavior described above is observed.
How can I get it to expand and collapse normally?
<div id='ah-body'>
<div style='max-height:500px;overflow-y:auto;'>
<a href='#section1' class='collapse-header col-sm-12' data-toggle='collapse'>Section 1</a>
<div id='section1' class='collapse'>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field1'>Field 1</label>
<input id='field1'>
</div>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field2'>Field 2</label>
<input id='field2'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field3'>Field 3</label>
<input id='field3'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field4'>Field 4</label>
<input id='field4'>
</div>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field5'>Field 5</label>
<input id='field5'>
</div>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field6'>Field 6</label>
<input id='field6'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field7'>Field 7</label>
<input id='field7'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field8'>Field 8</label>
<input id='field8'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field9'>Field 9</label>
<input id='field9'>
</div>
</div>
</div>
<a href='#section2' class='collapse-header col-sm-12' data-toggle='collapse'>Section 2</a>
<div id='section2' class='collapse'>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field10'>Field 10</label>
<input id='field10'>
</div>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field11'>Field 11</label>
<input id='field11'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field12'>Field 12</label>
<input id='field12'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field13'>Field 13</label>
<input id='field13'>
</div>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field14'>Field 14</label>
<input id='field14'>
</div>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field15'>Field 15</label>
<input id='field15'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field16'>Field 16</label>
<input id='field16'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field17'>Field 17</label>
<input id='field17'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field18'>Field 18</label>
<input id='field18'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field19'>Field 19</label>
<input id='field19'>
</div>
</div>
回答1:
You need to remove the class col-sm-12 in your section headers.
Explaination:
Chilly's answer explains why the collapse-header class conflicts with the predefined grid classes (ex: col-sm-12) and also goes over how the grid system should be implemented. The code below doesn't use the class row because this answer simply addresses the OP's question with a workaround. Please look at the official documentation here to know more about the proper usage of the grid system.
Snippet:
<a href='#section1' class='collapse-header' data-toggle='collapse'>Section 1</a>
<a href='#section2' class='collapse-header' data-toggle='collapse'>Section 2</a>
Link to working JSFiddle
Full Code:
#ah-body {
margin: 0 10% 0 10%;
}
#ah-body .collapse-header {
color: black;
cursor: pointer;
display: block;
font-size: 22px;
font-weight: bold;
text-decoration: none;
position: relative;
}
#ah-body .collapse-header:after {
content: '-';
font-size: 30px;
margin: 0 0 0 60%;
}
#ah-body .collapse-header[aria-expanded='true']:after {
content: '+';
}
#ah-body .input-wrapper label {
display: block;
}
#ah-body .input-wrapper.required label:after {
color: #F00;
content: '*';
}
#ah-body input {
border: 1px solid #BBB;
}
#ah-body .input-wrapper {
margin: 0 auto 0 auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id='ah-body'>
<div style='max-height:500px;overflow-y:auto;'>
<a href='#section1' class='collapse-header' data-toggle='collapse'>Section 1</a>
<div id='section1' class='collapse'>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field1'>Field 1</label>
<input id='field1'>
</div>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field2'>Field 2</label>
<input id='field2'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field3'>Field 3</label>
<input id='field3'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field4'>Field 4</label>
<input id='field4'>
</div>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field5'>Field 5</label>
<input id='field5'>
</div>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field6'>Field 6</label>
<input id='field6'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field7'>Field 7</label>
<input id='field7'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field8'>Field 8</label>
<input id='field8'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field9'>Field 9</label>
<input id='field9'>
</div>
</div>
</div>
<a href='#section2' class='collapse-header' data-toggle='collapse'>Section 2</a>
<div id='section2' class='collapse'>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field10'>Field 10</label>
<input id='field10'>
</div>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field11'>Field 11</label>
<input id='field11'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field12'>Field 12</label>
<input id='field12'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field13'>Field 13</label>
<input id='field13'>
</div>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field14'>Field 14</label>
<input id='field14'>
</div>
<div class='input-wrapper required col-sm-12 col-md-6'>
<label for='field15'>Field 15</label>
<input id='field15'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field16'>Field 16</label>
<input id='field16'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field17'>Field 17</label>
<input id='field17'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field18'>Field 18</label>
<input id='field18'>
</div>
<div class='input-wrapper col-sm-12 col-md-6'>
<label for='field19'>Field 19</label>
<input id='field19'>
</div>
</div>回答2:
When expanding an element - the browser has to calculate the height it will be when finished to complete the animation smoothly, otherwise it will 'fudge' it and overshoot.
This is usually thrown off either padding on the element being transitioned or not clearing floated elements inside.
It appears you have a lot of elements using the col-md-* classes, which set widths and floats. These are designed to be used with class="row" - which offsets margins and clears the floats.
It is good practice to use rows and col-- classes together to get rid of many unexpected side effects from not clearing floats
来源：https://stackoverflow.com/questions/34658730/bootstrap-collapse-expanding-too-far-when-first-clicked