Twitter bootstrap 3 如何对齐我的三列引导折叠手风琴中的顶部元素？

我用Bootstrap做了一个三柱手风琴折叠。我使用图像作为面板的背景，但我真的很困惑，为什么顶部的图片没有与其他图片对齐。我怎样才能让他们排好队？还有，有没有办法让过渡不那么尴尬和变化无常？提前谢谢

我一直在用Dreamweaver建立我的网站，但这是我一直在做的工作和给我带来问题的代码

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">


<div class="panel panel-default col-md-4 bites-stings">
    <div class="panel-heading" role="tab" id="headingSeven">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
            <h2>Bites and Stings</h2>
        </a>
    </div>
    <div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
        <div class="panel-body">
            <a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
            <a href="health-resources/ticks.html"><h4>Ticks</h4></a>
            <a href="#"><h4>Bees and Wasps</h4></a>
            <a href="#"><h4>Animal Bites</h4></a>
        </div>
    </div>
</div>


<div class="panel panel-default col-md-4  pet-health">
    <div class="panel-heading" role="tab" id="headingTwo">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            <h2>Pet Health and Safety</h2>
        </a>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
            <a href="#"><h4>Pet Allergies</h4></a>
            <a href="#"><h4>Toxic Plants</h4></a>
            <a href="#"><h4>Pet and Wildlife Encounters</h4></a>
        </div>
    </div>
</div>


<div class="panel panel-default col-md-4 livestock-health">
    <div class="panel-heading" role="tab" id="headingThree">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            <h2>Livestock Health and Safety</h2>
        </a>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
            <a href="#"><h4>This is a Topic</h4></a>
            <a href="#"><h4>Topic 2</h4></a>
            <a href="#"><h4>Another Topic</h4></a>
        </div>
    </div>
</div>


<div class="panel panel-default col-md-4 zoonotic">
    <div class="panel-heading" role="tab" id="headingFour">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
            <h2>Zoonotic Diseases</h2>
        </a>
    </div>
    <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
        <div class="panel-body">
            <a href="#"><h4>Bacterial</h4></a>
            <a href="#"><h4>Fungal</h4></a>
            <a href="#"><h4>Parasitic</h4></a>
            <a href="#"><h4>Prionotic</h4></a>
            <a href="#"><h4>Rickettsial</h4></a>
            <a href="#"><h4>Spirochetes</h4></a>
            <a href="#"><h4>Viral</h4></a>
        </div>
    </div>
</div>


<div class="panel panel-default col-md-4 allergies">
    <div class="panel-heading" role="tab" id="headingFive">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
            <h2>Allergies</h2>
        </a>
    </div>
    <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
        <div class="panel-body">
            <a href="#"><h4>Animal Allergies</h4></a>
            <a href="#"><h4>Environmental Allergies</h4></a>
        </div>
    </div>
</div>


<div class="panel panel-default col-md-4 environment-health">
    <div class="panel-heading" role="tab" id="headingSix">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
            <h2>Environmental Health</h2>
        </a>
    </div>
    <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
        <div class="panel-body">
            <a href="#"><h4>This is a Topic</h4></a>
            <a href="#"><h4>Topic 2</h4></a>
            <a href="#"><h4>Another Topic</h4></a>
        </div>
    </div>
</div>

---

因为bootstrap.min.css中的这一特定规则适用于除第一个未对齐的面板之外的所有面板。特别是因为

.panel+.panel

意味着在另一个

.panel

元素之后应用到所有

.panel

元素，因此，作为第一个元素，它没有前置

.panel

来定位它

.panel-group .panel+.panel{
   margin-top: 5px;
}

---

作为@lamelemon答案的替代方法，您可以尝试使用此规则来覆盖

bootstrap.min.css

中的

.panel+.panel

规则

.panel-group > .panel{
  margin-top: 5px;
}

这意味着将其应用于

.panel组

的子级的所有第一级

.panel

您可以在自己的CSS末尾添加此规则（如上所述）

（请参阅下面更新的代码-整个页面应显示所需的效果） 手风琴{ 边缘顶端：98px； 调整项目：灵活启动； } #手风琴板{ 边框宽度：0； 填充：0！重要； 边界半径：0%； } #手风琴.面板标题{ 高度：300px； 文本对齐：居中； 颜色：#fff； 垫顶：14%； 边界半径：0%； 背景色：透明！重要； 调整项目：灵活启动； } #手风琴.面板标题h2{ 颜色：#fff； } #手风琴，咬伤，刺痛{ 背景：url(http://chelmsfordmosquitocontrol.com/wp-content/uploads/2014/08/Mosquito-Bites.jpg)中心不重复； 背景尺寸：封面； } #手风琴.宠物健康{ 背景：url(http://www.elainedecarlo.com/cats_dogs_2.jpg)中心不重复； 背景尺寸：封面； } #手风琴.牲畜健康{ 背景：url(http://img11.nnm.me/0/f/c/2/2/849b5f5d84fed8199e0f71944dc.jpg)中心不重复； 背景尺寸：封面； } #手风琴，过敏{ 背景：url(http://www.westnebraska.com/cc-ChadronSP_FallColor_RickNeibel.jpg)中心不重复； 背景尺寸：封面； } #手风琴，人兽共患{ 背景：url(https://markingourterritory.files.wordpress.com/2015/01/20-92.jpg)居中 中心不重复； 背景尺寸：封面； } #环境卫生{ 背景：url(http://www.keepmyplanetgreen.com/wp-content/uploads/2014/06/06-05-10-wind-turbines-stubble-field-and-storm-clouds-wtrmrk.jpg)底部无重复； 背景尺寸：封面； } #手风琴。面板塌陷{ 背景色：rgba（255255,0.9）； } #手风琴。面板主体{ 填充顶部：20px； 填充底部：30px； 文本对齐：居中； } .panel组>.panel{ 边缘顶部：5px； }

我想我可以在我的答案中包含一个实际的解决方案哈哈。但是，是的，这就是你解决问题的方法。你确实包括了一个解决方案——我只是提供了一个解决同一问题的替代方法……这很有效，非常感谢！“我花了好几个小时试图找出答案。”艾比记得选择一个答案，如果其他答案有帮助，你也可以投票给他们

.panel-group > .panel{
  margin-top: 5px;
}