在Bootstrap CSS中隐藏溢出的问题

debugcn 发表于 Dev

温暖的

您能否看一下本演示，然后让我知道为什么CSSoverflow: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>

这是所需结果的快照

在此处输入图片说明

乔纳森·威尔逊

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/#sensitive-utilities

哦，为什么要包起来？引导网格类用于float:left排列网格项目。overflow:hidden仅具有包含浮点而不隐藏它们的效果。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-7

我来说两句

0条评论

登录后参与评论

来自分类Dev

隐藏CSS溢出导致文本对齐问题

来自分类Dev

问题CSS3缩放转换和溢出：隐藏在Safari中

来自分类Dev

Bootstrap Navbar CSS问题

来自分类Dev

Bootstrap-表CSS问题

来自分类Dev

Bootstrap模态宽度溢出问题

来自分类Dev

Bootstrap CSS填充问题

来自分类Dev

Bootstrap CSS样式问题

来自分类Dev

CSS HTML Bootstrap布局问题

来自分类Dev

Bootstrap Nav折叠（导航）滚动-需要隐藏溢出

来自分类Dev

PHP中的Bootstrap表问题

来自分类Dev

CSS Bootstrap Glyphicon对齐问题

来自分类Dev

Bootstrap CSS样式问题

来自分类Dev

Bootstrap网格溢出中心

来自分类Dev

Bootstrap 4隐藏问题

来自分类Dev

Bootstrap中的覆盖问题

来自分类Dev

css / bootstrap：溢出问题

来自分类Dev

Bootstrap / CSS：3列布局中的布局问题

来自分类Dev

Bootstrap产品轮播溢出？

来自分类Dev

Bootstrap Navbar CSS问题

来自分类Dev

CSS / Bootstrap div布局问题

来自分类Dev

隐藏模态的问题-Bootstrap 3

来自分类Dev

Bootstrap CSS行对齐问题

来自分类Dev

Animate.css和Bootstrap-select的CSS溢出问题

来自分类Dev

ASP的Bootstrap Modal中的问题

来自分类Dev

CSS Bootstrap全屏问题

来自分类Dev

CSS Bootstrap Glyphicon对齐问题

来自分类Dev

Bootstrap网格溢出中心

来自分类Dev

CSS、express 和 bootstrap：溢出和边距错误

来自分类Dev

从 bootstrap css 中删除 bootstrap glyphicons

Related 相关文章

文章