按钮切换水平与引导程序 [英] Button toggle horizontal with bootstrap

问题描述

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

我在两件事情上失败了：

1. 按钮不会内联其他元素并在实际+按钮之后


2. 当它向后折叠时，它中的元素会断开线并叠加在彼此之上

我准备了一个小提琴：

I'm trying to get a button to expand/collapse horizontally other elements(share buttons) and inline using the bootstrap framework

I'm failing at two things:

1. The button doesn't expand the other elements inline and after the actual + button
2. When it collapse back the elements in it breaks the line and stack on top of each other

I prepared a fiddle:

http://jsfiddle.net/g7qCZ/

Here is my html code:

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

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

解决方案

1) The button doesn't expand the other elements inline and after the actual + button

That's because the 'other elements' are nested inside of a div element. Div is a block level element with the default of display: block. You have to override this to display: inline-block if you would like the div contents to appear on the same line as your plus button.

2) When it collapse back the elements in it breaks the line and stack on top of each other

Overflowing is the last resort for a browser. It would rather not when there are better alternatives and typically wrapping is a better alternative. So the browser will first try to wrap the elements. Only once it can't anymore will it use utilize overflow: hidden to hide the elements. In order to tell the browser not to wrap, you can use white-space: nowrap;

---

What to do instead:

Bootstrap collapse is best suited for collapsing vertically. In order to collapse horizontally, you'll have to do a little bit of work. You can use jQuery animate to toggle the width property. However, this will decrement the width in JavaScript which is less performant than straight CSS3 transitions.

Here's another approach. Build a data toggle that just toggles the class in. Then style the control to have zero width by default, and make it full width when in is applied:

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

Then you can set up the rest of the styles on your 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

这篇关于按钮切换水平与引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！