Bootstrap中的水平按钮切换

Question

我正在尝试使用Bootstrap框架使一个按钮水平地展开/折叠其他元素(分享按钮)并使其内联。但我遇到了两个问题：

1. 该按钮未能将其他元素在实际+按钮之后内联展开
2. 当它折叠回去时，其中的元素会断行并堆叠在一起

我准备了一个示例：

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

- user2513846

Answer 1

1) 按钮不能使其他元素在实际的“+”按钮内联或之后扩展

那是因为“其他元素”嵌套在

元素内。Div是块级元素，默认为display: block。如果您希望< div>内容与加号按钮出现在同一行上，您必须覆盖此值为display: inline-block。

2) 当它重新折叠时，其中的元素会打破行并堆叠在彼此上方

对于浏览器而言，溢出是最后的手段。只有在存在更好的替代方案时，它才不愿使用溢出，并且通常换行是更好的替代方案。因此，浏览器将首先尝试换行元素。只有当它不能再换行时，才会使用overflow: hidden隐藏元素。为了告诉浏览器不要换行，您可以使用white-space: nowrap;

---

相反应该怎么做:

Bootstrap collapse最适合垂直折叠。要水平折叠，您需要做一些工作。您可以使用jQuery animate来切换宽度属性。然而，这会在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;
}

这里是在JSFiddle上可运行的演示

- KyleMit

---

太棒了！非常感谢你详细的解释！我还有一个问题。如果我想在一个页面上使用多个分享框，该如何使其可重复使用，就像示例中一样？ - user2513846

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/。

- Bass Jobsen

Answer 3

自5.1版本起，Bootstrap支持.collapse-horizontal。

- guyfromthesun

---

目前你的回答不够清晰，请编辑并添加更多细节以帮助其他人理解它如何回答问题。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community