关于Bootstrap CSS中隐藏溢出的问题

Question

请您查看This Demo并告诉我为什么css overflow:hidden规则不适用于.switch课程？ 请注意，我不想更改按钮和开关标记中的任何内容，并且需要保持原样（不得更改col-lg-x尺寸）

<div class="panel panel-default">
    <div class="panel-heading">Switch</div>
    <div class="panel-body">
        <div class="row">
           <div class="switch col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-10 col-md-10 col-sm-10 col-xs-10">
                <button class="btn btn-primary norightradius col-lg-1 col-md-1 col-sm-1 col-xs-1">Yes</button>
                <button class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-11 col-xs-11">New Model</button>
                <button class="btn btn-primary noleftradius col-lg-1 col-md-1 col-sm-1 col-xs-1">No</button>
           </div>
        </div>
    </div>
</div>

以下是所需结果的镜头

Answer 1

Bootstrap网格系统基于12列。如果您添加“是”按钮，标题栏和“否”按钮所使用的列，您将看到您已经有13列。

只需将标题栏的大小调整为10列而不是11列。

更改

<button class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-11 col-xs-11">New Model</button>

要

<button class="btn btn-primary noradius col-lg-10 col-md-10 col-sm-10 col-xs-10">New Model</button>

请参阅http://jsfiddle.net/wilsonjonash/Fz4CW/6/

---

如果您希望在某些屏幕尺寸下隐藏按钮，请尝试使用响应式实用程序类（例如hidden-sm或hidden-xs）：http://getbootstrap.com/css/#responsive-utilities

哦，它为什么包裹？引导网格类使用float:left来排列网格项。 overflow:hidden只有包含浮点数的效果，而不是隐藏它们。