我想了解如何在Bootstrap 3.0中水平使用折叠功能,而不是垂直使用。
我知道这个问题已经在这里提出过(Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical),但没有一个答案是有效的。
我想了解如何在Bootstrap 3.0中水平使用折叠功能,而不是垂直使用。
我知道这个问题已经在这里提出过(Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical),但没有一个答案是有效的。
.collapsing
,该类具有CSS3转换。默认情况下,转换将高度从0更改为(设置或自动),因此效果将是垂直的。插件还在添加类之前将元素的高度设置为0。.width
: <div id="democontent" class="collapse width">
Collapse.prototype.dimension = function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
Bootstrap的CSS没有为collapse.width
提供过渡效果,因此您需要像下面这样添加它:
.collapse.width {
height: auto;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
<div class="container">
<div style="height:100px;float:left;background-color:red">
<button data-toggle="collapse" data-target="#democontent">
o<br>
p<br>
e<br>
n<br>
</button>
</div>
<div id="democontent" class="collapse width" style="height:100px;background-color:blue;color:white;">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
虽然有些晚了,但我想分享我的解决方案。
你可以用CSS来实现。例如,我将图片与每个折叠的内容放在同样的分辨率下
html, body {
background-color:#e9eaed;
}
.content {
width:960px;
height:0px;
margin-right: auto;
margin-left: auto;
}
.panel-group {
width:430px;
z-index: 100;
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
}
.panel-heading {
width: 430px;
}
.panel-title {
height:18px
}
.panel-title a {
float:right;
text-decoration:none;
padding: 10px 430px;
margin: -10px -430px;
}
.panel-body {
height:830px;
}
.panel-group img {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0%) rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: translateX(0%) rotate(90deg);
-moz-transform-origin: left top;
-o-transform: translateX(0%) rotate(90deg);
-o-transform-origin: left top;
transform: translateX(0%) rotate(90deg);
transform-origin: left top;
}
.panel-group .panel img {
margin-left:400px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="content">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Suzuki
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<img src="http://files.conceptcarz.com/img/Suzuki/suzuki-concept-kizashi-3-2008-01-800.jpg" />
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Chevrolet
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<img src="http://www.wallsave.com/wallpapers/800x400/zl-camaro/65234/zl-camaro-chevrolet-carbon-concept-car-65234.jpg" />
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Volvo
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<img src="http://files.conceptcarz.com/img/Volvo/2009_Volvo_S60_Concept-Image-01-800.jpg" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
如果您想使用文本而不是图像,请尝试此jsfiddle.net/fauzi/h7szj1ku/。