在引导过程中，如何防止按钮与. buttons类相互合并？

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

下面是带有实例化示例的小提琴。

Answer 1

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