Bootstrap - 当屏幕尺寸较小时删除填充或边距

Posted

技术标签:

【中文标题】Bootstrap - 当屏幕尺寸较小时删除填充或边距【英文标题】:Bootstrap - Removing padding or margin when screen size is smaller 【发布时间】:2013-04-30 21:52:49 【问题描述】:

已编辑: 也许我应该问当屏幕缩小到 480px 宽度以下时,哪个选择器设置了侧边距?我一直在浏览 bootstrap-responsiveness.css 以找到它,但似乎没有任何影响。

原创 我基本上想删除任何默认填充或边距设置,以便在较小的设备屏幕上进行响应。

我在container-fluid 选择器上覆盖了background color,对于更大的屏幕,它们在整个宽度上完美呈现 100%,但屏幕缩小为更小的尺寸, 默认情况下,Bootstrap 似乎在container-fluidcontainer 上添加边距或填充。

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

如果我使用自定义 css 覆盖 Bootstrap 的默认样式,我应该覆盖什么媒体查询或选择器以在较小的屏幕上删除此填充?

【问题讨论】:

其实padding是加到body里面的。 【参考方案1】:

为了解决这样的问题,我正在使用 CSS - 我认为最快和最简单的方法...只需根据您的需要修改它...

@media only screen and (max-width: 480px) 
    #your_id width:000px;height:000px;

@media only screen and (min-width: 480px) and (max-width: 768px) 
    #your_id width:000px;height:000px;

@media only screen and (min-width: 768px) and (max-width: 959px) 
    #your_id width:000px;height:000px;

@media only screen and (min-width: 959px) 
    #your_id width:000px;height:000px;

【讨论】:

sorry..它不会仅仅通过添加一个选择器来覆盖这个问题的填充... @tassoevan 恐怕我已经知道 000px 是否与 0 相同,将 000px 更改为 0 并不能解决问题另外,我不知道设置宽度是否是个好主意到一个像素值甚至到 0 ..我猜这与边距或填充有关。 "000" 只是示例。你应该写 #your_id margin:5px;padding:0px; 而不是 #your_id width:000px;height:000px; 尽量写出正确的代码!初学者可能会感到困惑! :)【参考方案2】:

专门针对“电话”的@media 查询是..

@media (max-width: 480px)  ... 

但是,对于任何较小的屏幕尺寸,您可能希望删除填充/边距。默认情况下,Bootstrap 会在 978px 处调整 body、container 和 navbars 的边距/填充。

以下是一些对我有用(在大多数情况下)的查询:

@media (max-width: 978px) 
    .container 
      padding:0;
      margin:0;
    

    body 
      padding:0;
    

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top 
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    

Demo


Bootstrap 4 更新

使用新的响应式spacing utils,它可以让您为不同的屏幕宽度(断点)设置填充/边距: https://***.com/a/43208888/171456

【讨论】:

是的!终于找到了设置这种行为的原因。你发现了我的问题。非常感谢。 也许我有类似的问题,但与正文和实际 .container 类之间的填充有关。容器对于 Iphone 5 屏幕来说真的很小,间距工具对我没有帮助,相反,我直接编辑 body 样式,将 padding 从 50px 更改为 15px,现在我们在屏幕上有了更多的空间。【参考方案3】:

让元素达到设备 100% 宽度的方法是在其上使用负的左右边距。主体有 24px 的内边距,因此您可以使用负边距:

element
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;

【讨论】:

【参考方案4】:

此线程有助于在我的特定情况下找到解决方案(引导程序 3)

@media (max-width: 767px) 
  .container-fluid, .row 
    padding:0px;
  
  .navbar-header 
    margin:0px;
  

【讨论】:

【参考方案5】:

这里的问题比删除容器填充要复杂得多,因为网格结构在为封闭的行应用负边距时依赖于这个填充。

在这种情况下删除容器填充将导致该容器类内部的所有行导致 x 轴溢出,这是 Bootstrap Grid 最愚蠢的事情之一。

从逻辑上讲,它应该被

    切勿将 .container 类用于行以外的任何内容 克隆没有填充的 .container 类以用于非网格 html 要删除移动设备上的 .container 填充,您可以使用媒体查询手动删除它,然后使用 overflow-x: hidden; 这不是很可靠,但在大多数情况下都有效。

如果您使用LESS,最终结果将如下所示

@media (max-width: @screen-md-max) 
    .container
        padding: 0;
        overflow-x: hidden;
    

将媒体查询更改为您想要定位的任何大小。

最后的想法,我强烈建议使用Foundation Framework Grid 作为其更高级的方式

【讨论】:

这仍然适用于 Bootstrap 4,如果由于某种原因您不想在列上使用 px-sm-0【参考方案6】:
.container-fluid 
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;

【讨论】:

点评来源:你能详细说明一下吗。【参考方案7】:

我曾在使用类似格式和代码的网站上遇到过这个问题,我绞尽脑汁想知道是什么缺失的细节让我的一些网站可以正常工作,而另一些则不能。

对于 Bootstrap 3:我的答案不是为 .container-fluid、.row 重写 css 或重置边距,我意识到的一致模式是 较长单词的长度会影响设计并创建边距

解决步骤:

    通过临时删除包含容器的部分来测试您的页面,并在小型浏览器上测试您的网站。这将识别您的问题容器。

    您可能遇到了 div 格式问题。如果你这样做,修复它。如果一切顺利,那么:

    确定您是否使用了不换行的长字。如果您无法更改单词(例如标语或标语等)

解决方案 1:在您的媒体查询中将字体格式设置为更小的尺寸以实现更小的屏幕(我通常发现 @media (max-width: 767px) 就足够了)。

或者:

解决方案2:

@media (max-width: 767px)

h1, h2, h3 word-wrap: break-word;

【讨论】:

【参考方案8】:

Paulius Marčiukaitis 的 CSS 非常适合我的 Genesis 主题,以下是我如何进一步修改它以满足我的要求:

@media only screen and (max-width: 480px) 
.entry 
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;

【讨论】:

【参考方案9】:

这就是我为 Bootstrap 3/4 所做的工作

使用容器流体代替容器。

将此添加到我的 CSS 中

@media (min-width: 1400px) 
    .container-fluid
        max-width: 1400px;
       

这将删除屏幕宽度低于 1400 像素的边距

【讨论】:

【参考方案10】:

另一个可能导致边距问题的 css 是您的 css 中有 direction:someValue,因此只需将其设置为初始值即可将其删除。

例如:

body 
     direction:rtl;
 
@media (max-width: 480px) 
    body 
     direction:initial;
    

【讨论】:

【参考方案11】:

在 Bootstrap 4 中,初始容器的 15px 边距向下级联到所有行和列。所以,这样的事情对我有用......

@media (max-width: 576px) 
    .container-fluid 
        padding-left: 5px;
        padding-right: 5px;
    

    .row 
        margin-left: -5px;
        margin-right: -5px;
    
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto 
        padding-left: 5px;
        padding-right: 5px;
    
    .row.no-gutters 
        margin-left: 0;
        margin-right: 0;
    

【讨论】:

被低估的答案,这帮助我摆脱了移动设备上的水平滚动条【参考方案12】:

简单的解决方案是写这样的东西,

px-lg-1

mb-lg-5

通过添加lg,该类将仅应用于大屏幕

【讨论】:

太棒了,负鼠。谢谢。【参考方案13】:

对于 Bootstrp 5 使用 .g-0 .g-md-1 这会将小于 576px 的屏幕尺寸设置为零

<div class="container g-0 g-md-1"> ... </div>

【讨论】:

以上是关于Bootstrap - 当屏幕尺寸较小时删除填充或边距的主要内容,如果未能解决你的问题,请参考以下文章

当屏幕尺寸较小时如何在屏幕右侧对齐图标

当设备尺寸较小时,将不会包含 <Div> 部分

屏幕尺寸较小时出现的按钮如何操作[关闭]

具有 vw 和 vh 的响应式网站,当屏幕太小时,尺寸保持相同的尺寸 (px)

如何使 div 堆叠没有空格并保留较小尺寸的顺序 - 在 Bootstrap 中

当屏幕尺寸减小时,弹出模式的顶部部分会切断屏幕