【问题标题】:Bootstrap 3 Collapse (right to left)Bootstrap 3崩溃(向左)
【发布时间】:2015-06-11 09:48:41
【问题描述】:

有一些帖子讨论从左到右折叠,还有一些 Fiddle 示例here。但我希望崩溃从右到左发生。仅使用下面显示的代码是否可能。

 #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>

【问题讨论】:

    标签: html css twitter-bootstrap collapse


    【解决方案1】:

    是的,如果您将 "float:right" 添加到您的此 div 中的样式中

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

    添加后代码应如下所示。

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

    如果这不是您想要的,请回复我。

    【讨论】:

    • 是的,有点用。我会接受这个作为我的答案。谢谢!
    • @user1186050 如果这确实回答了您的问题,请接受它。
    猜你喜欢
    • 2015-01-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-24
    • 1970-01-01
    • 2019-02-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多