如何在我的三列Bootstrap折叠式手风琴中对齐顶部元素？

Question

我使用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>

我的css

#accordion {
margin-top: 98px;
align-items: flex-start;
}
#accordion .panel {
border-width: 0;
padding: 0 !important;
border-radius: 0%;
}

#accordion .panel-heading {
height: 300px;
text-align: center;
color: #fff;
padding-top: 14%;
border-radius: 0%;
background-color: transparent !important;
align-items: flex-start;
}
#accordion .panel-heading h2 {
color: #fff;
}

#accordion .bites-stings {
background: url(http://chelmsfordmosquitocontrol.com/wp-       content/uploads/2014/08/Mosquito-Bites.jpg) center center no-repeat;
background-size: cover;
}
#accordion .pet-health {
background: url(http://www.elainedecarlo.com/cats_dogs_2.jpg) center center    
no-repeat;
background-size: cover;
}
#accordion .livestock-health {
background: 
url(http://img11.nnm.me/0/f/c/2/2/849b5f5d84fed8199e0f71944dc.jpg) center
center no-repeat;
background-size: cover;
}
#accordion .allergies {
background:
url(http://www.westnebraska.com/cc-ChadronSP_FallColor_RickNeibel.jpg)
center center no-repeat;
background-size: cover;
}
#accordion .zoonotic {
background:
url(https://markingourterritory.files.wordpress.com/2015/01/20-92.jpg)
center center no-repeat;
background-size: cover;
}
#accordion .environment-health {
background:
url(http://www.keepmyplanetgreen.com/wp-content/uploads/2014/06/06-05-10- wind-turbines-stubble-field-and-storm-clouds-wtrmrk.jpg) bottom no-repeat;
background-size: cover;
}

#accordion .panel-collapse {
background-color: rgba(255,255,255,0.9);

}
#accordion .panel-body {
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}

http://codepen.io/aahmed2/pen/yOQvVz

Answer 1

因为bootstrap.min.css中的这个特定规则正在应用于除了第一个未对齐的面板之外的所有面板。特别是因为.panel+.panel意味着在另一个.panel元素之后应用于所有.panel元素，因此它是第一个没有前导.panel来定位它的元素。

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

Answer 2

作为@ lamelemon的答案的替代方案，您可以尝试使用此代码覆盖.panel + .panel中的bootstrap.min.css规则。

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

这意味着将其应用于.panel个孩子的所有第一级.panel-group。

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

（请参阅下面的更新代码 - 整页应显示所需的效果）

＆＃13;

＆＃13;

#accordion {
	margin-top: 98px;
	align-items: flex-start;
}
#accordion .panel {
    border-width: 0;
	padding: 0 !important;
	border-radius: 0%;
}

#accordion .panel-heading {
  height: 300px;
  text-align: center;
  color: #fff;
  padding-top: 14%;
  border-radius: 0%;
  background-color: transparent !important;
  align-items: flex-start;
}
#accordion .panel-heading h2 {
	color: #fff;
}

#accordion .bites-stings {
  background: url(http://chelmsfordmosquitocontrol.com/wp-content/uploads/2014/08/Mosquito-Bites.jpg) center center no-repeat;
  background-size: cover;
}
#accordion .pet-health {
  background: url(http://www.elainedecarlo.com/cats_dogs_2.jpg) center center no-repeat;
  background-size: cover;
}
#accordion .livestock-health {
 background:url(http://img11.nnm.me/0/f/c/2/2/849b5f5d84fed8199e0f71944dc.jpg) center center no-repeat;
  background-size: cover;
}
#accordion .allergies {
  background:url(http://www.westnebraska.com/cc-ChadronSP_FallColor_RickNeibel.jpg) center center no-repeat;
  background-size: cover;
}
#accordion .zoonotic {
  background:url(https://markingourterritory.files.wordpress.com/2015/01/20-92.jpg) center
   center no-repeat;
  background-size: cover;
}
#accordion .environment-health {
  background:url(http://www.keepmyplanetgreen.com/wp-content/uploads/2014/06/06-05-10-wind-turbines-stubble-field-and-storm-clouds-wtrmrk.jpg) bottom no-repeat;
  background-size: cover;
}

#accordion .panel-collapse {
	background-color: rgba(255,255,255,0.9);
	
}
#accordion .panel-body {
	padding-top: 20px;
	padding-bottom: 30px;
	text-align: center;
}

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

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
		

</div>

＆＃13;

＆＃13;

＆＃13;