如何防止按钮与引导程序中的 .btn-group 类相互合并？

Question

在引导程序中使用 .btn-group 类时，如何防止一列按钮折叠成另一列？在此示例中，当减小页面宽度时，右列折叠到中间列。我应该使用另一个课程来防止这种情况吗？ 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%;，它限制了较小屏幕上按钮的列宽/空间，同时为.industry_button_right 设置了right: 25px;，它将第三个按钮推到它自然想要定位的位置的右​​侧。