html - 如何防止按钮与 Bootstrap 中的 .btn-group 类相互合并？

Question

在 bootstrap 中使用 .btn-group 类时，如何防止一列按钮折叠成另一列？在此示例中，当减小页面宽度时，右侧的列会折叠到中间的列中。我应该使用另一个类(class)来防止这种情况发生吗？下面是 JsFiddle 实例。

桌面屏幕尺寸:

较小的屏幕尺寸:

HTML:

<div class="industry_center_button">
            <div class="row">
                <div class="btn-group">
                    <div class="col-xs-4 industry_button_padding industry_button_left">
                        <a href="#" class="btn btn-lg btn-default industry_button pull-right ">AdTech</a>
                    </div>
                    <div class="col-xs-4 industry_button_padding">
                        <a href="#" class="btn btn-lg btn-default industry_button">B2B</a>
                    </div>
                    <div class="col-xs-4 industry_button_padding industry_button_right ">
                        <a href="#" class="btn btn-lg btn-default industry_button"><span class="industry_button_multiline">Consumer Electronics</span></a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="btn-group">
                    <div class="col-xs-4 industry_button_padding industry_button_left">
                        <a href="#" class="btn btn-lg btn-default industry_button pull-right "><span class="industry_button_multiline">Digital Media</span></a>
                    </div>
                    <div class="col-xs-4 industry_button_padding">
                        <a href="#" class="btn btn-lg btn-default industry_button">eCommerce</a>
                    </div>
                    <div class="col-xs-4 industry_button_padding industry_button_right ">
                        <a href="#" class="btn btn-lg btn-default industry_button"><span class="industry_button">Employent</span></a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="btn-group">
                    <div class="col-xs-4 industry_button_padding industry_button_left">
                        <a href="#" class="btn btn-lg btn-default industry_button pull-right ">Ed Tech</a>
                    </div>
                    <div class="col-xs-4 industry_button_padding">
                        <a href="#" class="btn btn-lg btn-default industry_button"><span class="industry_button_overflow">Entertainment</span></a>
                    </div>
                    <div class="col-xs-4 industry_button_padding industry_button_right ">
                        <a href="#" class="btn btn-lg btn-default industry_button">Fashion</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="btn-group">
                    <div class="col-xs-4 industry_button_padding industry_button_left">
                        <a href="#" class="btn btn-lg btn-default industry_button pull-right ">Fin Tech</a>
                    </div>
                    <div class="col-xs-4 industry_button_padding">
                        <a href="#" class="btn btn-lg btn-default industry_button">Fitness</a>
                    </div>
                    <div class="col-xs-4 industry_button_padding industry_button_right ">
                        <a href="#" class="btn btn-lg btn-default industry_button">Gaming</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="btn-group">
                    <div class="col-xs-4 industry_button_padding industry_button_left">
                        <a href="#" class="btn btn-lg btn-default industry_button pull-right "><span class="industry_button_multiline">Internet of Things</span></a>
                    </div>
                    <div class="col-xs-4 industry_button_padding">
                        <a href="#" class="btn btn-lg btn-default industry_button">Media</a>
                    </div>
                    <div class="col-xs-4 industry_button_padding industry_button_right ">
                        <a href="#" class="btn btn-lg btn-default industry_button"><span class="industry_button_multiline">Non-profit</span></a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="btn-group">
                    <div class="col-xs-4 industry_button_padding industry_button_left">
                        <a href="#" class="btn btn-lg btn-default industry_button pull-right ">Other</a>
                    </div>
                    <div class="col-xs-4 industry_button_padding">
                        <a href="#" class="btn btn-lg btn-default industry_button"><span class="industry_button_multiline">Public Relations</span></a>
                    </div>
                    <div class="col-xs-4 industry_button_padding industry_button_right ">
                        <a href="#" class="btn btn-lg btn-default industry_button">Publishing</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="btn-group">
                    <div class="col-xs-4 industry_button_padding industry_button_left">
                        <a href="#" class="btn btn-lg btn-default industry_button pull-right "><span class="industry_button_multiline">Real Estate</span></a>
                    </div>
                    <div class="col-xs-4 industry_button_padding">
                        <a href="#" class="btn btn-lg btn-default industry_button">Security</a>
                    </div>
                    <div class="col-xs-4 industry_button_padding industry_button_right ">
                        <a href="#" class="btn btn-lg btn-default industry_button">Software</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="btn-group">
                    <div class="col-xs-4 industry_button_padding industry_button_left">
                        <a href="#" class="btn btn-lg btn-default industry_button pull-right "><span class="industry_button_multiline">Travel &amp; Hospitality</span></a>
                    </div>
                    <div class="col-xs-4 industry_button_padding">
                        <a href="#" class="btn btn-lg btn-default industry_button">Wearables</a>
                    </div>
                    <div class="col-xs-4 industry_button_padding industry_button_right ">
                        <a href="#" class="btn btn-lg btn-default industry_button" style="visibility: hidden;"></a>
                    </div>
                </div>
            </div>
        </div>

CSS:

.industry_button {
    font-size: 10pt;
    width: 98px;
    height: 41px;
    text-align: center;
    background-color: #F2F2F2;
    white-space: normal;
    vertical-align: middle;
}
.industry_button_multiline {
    position: relative;
    bottom: 7px;
}
.industry_button_overflow {
    position: relative;
    right: 12px;
}
.industry_button_padding {
    padding-top: 1px;
    padding-bottom: 1px;
}
.industry_button_left {
    position: relative;
    left: 25px;
}
.industry_button_right {
    position: relative;
    right: 25px;
}
.industry_center_button {
    margin: auto;
    width: 30%;
    display: block;
}
.btn-group {
    padding-top: 5px;
    padding-bottom: 5px;
}

这是 fiddle以实例为例。

Answer 1

是您的 .industry_button_right 和 .industry_center_button 类导致它们重叠。您为 .industry_center_button 设置了 width: 30%;，它限制了较小屏幕上按钮的列宽/空间以及 right: 25px; 为 .industry_button_right 设置，将第三个按钮推到它自然想要放置的位置的右​​侧。