css 带引导的水平按钮切换

vuktfyat 于 2022-12-30 发布在其他

关注(0)|答案(3)|浏览(135)

我尝试使用引导框架获得一个按钮来水平展开/折叠其他元素（共享按钮）和内联
我在两件事上失败了：
1.该按钮不会展开实际的+按钮之后的行内其他元素
1.当它向后折叠时，其中的元素会断开行并堆叠在彼此的顶部
我准备了小提琴：
http://jsfiddle.net/g7qCZ/
下面是我的html代码：

<button type="button" class="btn btn-primary btn-sm" 
        data-toggle="collapse" data-target="#demo">+</button>
<div id="demo" class="collapse in width" style="background-color:yellow;">
    <div style="padding: 0; overflow:hidden;">
        <button class="btn btn-default btn-xs" type="button">
            <span class="glyphicon glyphicon-star"></span> Star
        </button>
        <button class="btn btn-default btn-xs" type="button">
            <span class="glyphicon glyphicon-star"></span> Star
        </button>
        <button class="btn btn-default btn-xs" type="button">
            <span class="glyphicon glyphicon-star"></span> Star
        </button>
        <button class="btn btn-default btn-xs" type="button">
            <span class="glyphicon glyphicon-star"></span> Star
        </button>
    </div>
</div>

和我的CSS：

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

css

来源：https://stackoverflow.com/questions/24832110/button-toggle-horizontal-with-bootstrap

3条答案

按热度按时间

nue99wik1#

1)该按钮不会展开实际的+按钮之后的行内其他元素
这是因为"other elements"嵌套在div元素中。Div是块级元素，默认值为display: block。如果希望div内容与加号按钮显示在同一行，则必须将其重写为display: inline-block。
2)当它向后折叠时，其中的元素会断开行并堆叠在彼此的顶部
溢出是浏览器的最后手段。当有更好的选择时，它宁愿不这样做，通常 Package 是一个更好的选择。所以浏览器会首先尝试 Package 元素。只有当它不能再使用overflow: hidden隐藏元素。为了告诉浏览器不要 Package ，你可以使用white-space: nowrap;

该怎么做：

Bootstrap collapse最适合垂直折叠。为了水平折叠，你必须做一些工作。你可以使用jQuery animate来切换width属性。但是，这会减少JavaScript中的宽度，这比直接的CSS3转换性能差。
这里还有另一种方法，构建一个数据切换器，只切换类in，然后将控件样式设置为默认零宽，应用in时设置为全宽：

<button type="button" class="btn btn-primary btn-sm" 
        data-toggle="toggle" data-target="#demo">+</button>

$("[data-toggle='toggle']").click(function() {
    var selector = $(this).data("target");
    $(selector).toggleClass('in');
});

#demo {
    width: 0px;
}
#demo.in {
    width: 220px;
}

然后，您可以在演示div上设置其余的样式：

#demo {
    -webkit-transition: width 2s ease;
    -moz-transition: width 2s ease;
    -o-transition: width 2s ease;
    transition: width 2s ease;

    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    background: yellow;
    vertical-align: middle;
    line-height: 30px;
    height: 30px;
}

∮ ∮ ∮ ∮

赞(0）回复(0）举报 2022-12-30

zu0ti5jz2#

@KyleMit的答案很好用，我认为你确实应该用white-space: nowrap;和display: inline-block（或者float:left）来解决你的问题。
您可以在#demo上应用上面提到的两个属性：

#demo {
    display: inline-block;
    white-space: nowrap; 
}

对于其他所有内容，您可以只使用Bootstrap代码，而不需要jQuery animate。Bootstrap的一些修复是必需的，请参见https://github.com/twbs/bootstrap/pull/15104，Bootstrap 3.0 Collapse Horizontally - Bounces in Chrome。
演示：http://jsfiddle.net/1agh7kaf/1/

赞(0）回复(0）举报 2022-12-30

zi8p0yeb3#

自5.1靴带支撑，水平折叠

赞(0）回复(0）举报 2022-12-30

我来回答

css 带引导的水平按钮切换

3条答案

该怎么做：

相关问题

热门标签

最新问答