Question

这里引导新手。

我无法按要求让手风琴工作。

我希望看到本网站滑块底部的优惠：http://www.christchurch-harbour-hotel.co.uk/

我正在努力让div对齐到行的底部，以便手风琴向上打开。我也遇到了css中定位元素的问题，两个列都会重叠。

我确信这只是我遗失的一件小事。非常感谢你的帮助。

以下是我正在处理的网页的链接：http://crystalsprings.co.za/newsite/

以下是相关的html：

.specialblock1_header {
	background-color: #df4351;
	padding: 10px 15px 10px 15px;
	color:#FFF;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:1.2em;
	height:100%;
	text-align:left;
	outline:none;
	border:none;
}

.specialblock1_content {
	background-color: #FFF;
	padding: 10px 15px 10px 15px;
	color:#000;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:1em;
	height:100%;
	text-align:left;
}
.specialblock2_header {
	background-color: #F96;
	padding: 10px 15px 10px 15px;
	color:#FFF;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:1.2em;
	height:100%;
	text-align:left;
}

.accordian_row  {
	height:400px;
	position: relative;
}

.accordian_row .panel-default{
	position: absolute;
	margin:0;
}

<div class="row accordian_row">
 	<div class="col-lg-4"></div>
           <div class="col-lg-2">   
              <div class="panel-group" id="accordion1">
              		<div class="panel panel-default">
                    	
                        <div class="panel-heading">
                        	<h4 class="panel-title">
                            	<a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">Planning your honeymoon?</a>
                            </h4>
                        </div>
                        
                        <div id="collapse1" class="panel-collapse collapse">
                        	<div class="panel-body specialblock1_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                        </div>
                    </div>
              </div>
            </div>

           <div class="col-lg-2">   
              <div class="panel-group" id="accordion2">
              		<div class="panel panel-default">
                    	
                        <div class="panel-heading">
                        	<h4 class="panel-title">
                            	<a data-toggle="collapse" data-parent="#accordion2" href="#collapse2">Romance in the misty mountains</a>
                            </h4>
                        </div>
                        
                        <div id="collapse2" class="panel-collapse collapse">
                        	<div class="panel-body specialblock1_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                        </div>
                    </div>
              </div>
           </div>
            <div class="col-lg-4"></div>
        </div>
    </div>

Answer 1

试试这个css代码

 .panel-collapse{
        position: absolute;
            bottom: 37px;
        }    


       .accordian_row .panel-default{
            position: relative;
            margin:0;
        }

链接到工作小提琴箱 Bootstrap Accordion align to bottom of div

Answer 2

您需要更改html中的结构才能实现向上的方向 #collapse1 div应放在.panel-heading

之上

demo

<div class="panel-group" id="accordion1">
                    <div class="panel panel-default">

                        <div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                            <div class="panel-body specialblock1_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                        </div><div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1" class="collapsed" aria-expanded="false">Planning your honeymoon?</a>
                            </h4>
                        </div>


                    </div>
              </div>

Answer 3

您可以使用表的属性来实现此目的 - 请参阅我使用的内联样式，

fiddle

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="MyApp.Pages.Navigation">
<TabbedPage.Children>
    <ContentPage Title="Home">
    </ContentPage>
    <ContentPage Title="Browse">
    </ContentPage>
</TabbedPage.Children>
</TabbedPage>

Answer 4

.accordian_row .panel-default {
    position: absolute;
    bottom: 0;
}
.collapse.in, .collapsing {
    position: absolute !important;
    bottom: 100%;
    left: 0;
    width: 100%;
}
.panel-group {
    margin-bottom: 0;
}

试试这些代码。它应该工作正常。

Bootstrap Accordion与div的底部对齐

4 个答案: