twitter-bootstrap - 在 Bootstrap3 中的较小设备上减少装订线(默认 30 像素)？

Question

在 bootstrap 3 中，装订线定义为 30px(每列各 15px)。我正在运行的问题是，例如，如果我将屏幕缩小到很小，排水沟最终会比列本身更宽，如下所示(深蓝色 = 列，浅蓝色 = 排水沟)。



您可以修改某些分辨率状态的装订线宽度吗？ (手机、平板电脑等)

Answer 1

排水沟是由左右填充构成的，您可以使用媒体查询来根据您的屏幕尺寸进行更改:

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