2015-04-06 151 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如果这确实回答你的问题,请接受它。 –