Question

我尝试使用按钮来水平扩展/折叠其他元素（共享按钮）并使用引导框架内联

我在两件事上失败了：

该按钮不会在内联和实际+按钮
当它向后折叠时，它中的元素会破坏线条并叠加在彼此之上

我准备了一个小提琴：

这是我的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;
}

Answer 1

1）按钮不会在内联和实际+按钮
之后展开其他元素

那是因为'其他元素'嵌套在div元素中。 Div是块级元素，默认值为display: block。如果您希望div内容与加号按钮显示在同一行，则必须将此覆盖为display: inline-block。

2）当它向后折叠时，它中的元素会破坏线并叠加在彼此之上

溢出是浏览器的最后手段。当有更好的替代品并且通常包装是更好的替代品时，它宁愿不会。因此浏览器将首先尝试包装元素。只有在它不能再使用时才会使用overflow: hidden来隐藏元素。为了告诉浏览器不要换行，您可以使用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;
}

然后你可以在你的demo 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;
}

Here's a working demo in fiddle

Answer 2

@KyleMit的答案效果很好。我认为您确实应该使用white-space: nowrap;和display: inline-block（或float:left）来解决您的问题。

您可以在#demo上使用上述两种属性：

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

对于其他所有内容，您只能使用Bootstrap代码~~，并且不需要jQuery动画~~。需要对Bootstrap进行一些修复，请参阅https://github.com/twbs/bootstrap/pull/15104，Bootstrap 3.0 Collapse Horizontally - Bounces in Chrome。

演示：http://jsfiddle.net/1agh7kaf/1/

按钮切换水平与引导程序

2 个答案:

该怎么做：

Here's a working demo in fiddle