javascript - 当浏览器窗口改变时改变 Bootstrap 按钮组的类

Question

我有一个 id 为 opacnavigation-btn 的按钮组

    <div id="opacnavigation-btn" class="btn-group">              
        <button type="button" class="btn btn-success ">
            <i class="icon-home"></i>
            Home                    
        </button>
        <button type="button" class="btn btn-success ">
            <i class="icon-thumbs-up"></i>                    
            Policies
        </button>
        <button type="button" class="btn btn-success ">  
            Ask a Librarian
        </button>
        <button type="button" class="btn btn-success ">
            <i class="icon-comment"></i>   
            About the Library
        </button>                              
    </div> 

当浏览器窗口为 521px 及以上时，它看起来像这样:

但是当浏览器窗口低于 521px 时，我想将 Button Group 的类从 btn-group 更改为 btn-group-vertical。它应该看起来像这样:

我在 CSS 中使用这段代码完成了它:

@media only screen and (min-width: 0px) and (max-width: 521px){
    ....//Whats Next?
}

我的问题是我不知道如何更改按钮组的类。我将如何做？请帮我。谢谢。

Answer 1

您必须在媒体查询中为 btn-group-vertical 类和 btn-group 类提供相同的 css 样式。

@media only screen and (min-width: 0px) and (max-width: 521px){ 
    .btn-group > .btn, .btn-group > .btn-group, .btn-group > .btn-group > .btn {
        display: block;
        float: none;
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-top: -1px;
    }
    .btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
        margin-left: 0px;
    }
    .btn-group > .btn:first-child:not(:last-child) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-right-radius: 4px;
    }
    .btn-group > .btn:first-child {
        margin-left: 0;
    }
}