twitter-bootstrap – 在Bootstrap3中的较小设备上减少沟槽(默认

发布时间：2020-12-18 00:15:55 所属栏目：安全来源：网络整理

导读：在引导3中，沟槽被定义为30像素(每列15像素)。我正在运行的问题是，例如，如果我将屏幕缩小到很小，则沟槽比列本身更宽，如下所示(较深的蓝色=列，较浅的蓝色=沟槽)。您可以修改某些分辨率状态的沟槽宽度吗？ (手机，平板电脑等) 解决方法沟槽由左右填充构

在引导3中，沟槽被定义为30像素(每列15像素)。我正在运行的问题是，例如，如果我将屏幕缩小到很小，则沟槽比列本身更宽，如下所示(较深的蓝色=列，较浅的蓝色=沟槽)。

您可以修改某些分辨率状态的沟槽宽度吗？ (手机，平板电脑等)

解决方法

沟槽由左右填充构建，您可以使用媒体查询根据屏幕大小进行更改：

/* Small devices (tablets,768px and up) */
@media (min-width: 768px) 
{ 
    div[class^="col"]{padding-left:5px; padding-right:5px;}
}

/* Medium devices (desktops,992px and up) */
@media (min-width: 992px) 
{   
    div[class^="col"]{padding-left:10px; padding-right:10px;}
}

/* Large devices (large desktops,1200px and up) */
@media (min-width: 1200px) 
{   
    /*default so you don't need this*/
    div[class^="col"]{padding-left:15px; padding-right:15px;}
}

注意另见这个问题：Bootstrap 3 Gutter Size.当您还想改变网格两边的“视觉”沟槽时，您应该使用这个。在这种情况下，您还必须将.container类的填充设置为您的沟槽大小。是。

/* Large devices (large desktops,1200px and up) */
@media (min-width: 1200px) 
{   
    /*default so you don't need this*/
    div[class^="col"]{padding-left:85px; padding-right:85px;}
    .container{padding-left:85px; padding-right:85px;}
    .row {
    margin-left: 0;
    margin-right: 0;
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!