2015-04-06 156 views
0

有一些帖子從左到右討論摺疊,並且有一些小提琴示例here。但我希望這次崩潰是從右向左發生的。只有下面顯示的代碼纔可能。Bootstrap 3 Collapse(從右到左)

#demo.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; 
 
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> 
 
    Horizontal Collapsible 
 
</button> 
 

 
<div id="container" style="width:400px;height:70px;"> 
 
    <div id="demo" class="collapse in width" style="background-color:yellow;"> 
 
     <div style="padding: 20px; overflow:hidden; width:200px;"> 
 
      Here is my content 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<small>Works in FF 24.0, IE 10.</small> 
 
<br /> 
 
<b>Doesn't work in Chrome 30.0.1599.1.1</b> 
 
<ul> 
 
    <li>Bounces on Show</li> 
 
    <li>Hide has no transition</li> 
 
</ul>

回答

0

是,如果你在這個div的你

<div id="demo" class="collapse in width" style="background-color:yellow;"> 

的代碼添加"float:right"你的風格應該是這樣的,當你添加它。

<div id="demo" class="collapse in width" style="background-color:yellow; float:right;"> 

如果這不是你想要的,請回到我身邊。

+0

是的,有點作用。我會接受這個答案。謝謝! – user1186050

+0

你非常歡迎 –

+0

@ user1186050如果這確實回答你的問題,請接受它。 –