在 bootstrap 3 中,装订线定义为 30px(每列各 15px)。我正在运行的问题是,例如,如果我将屏幕缩小到很小,排水沟最终会比列本身更宽,如下所示(深蓝色 = 列,浅蓝色 = 排水沟)。
您可以修改某些分辨率状态的装订线宽度吗?(手机、平板电脑等)
在 bootstrap 3 中,装订线定义为 30px(每列各 15px)。我正在运行的问题是,例如,如果我将屏幕缩小到很小,排水沟最终会比列本身更宽,如下所示(深蓝色 = 列,浅蓝色 = 排水沟)。
您可以修改某些分辨率状态的装订线宽度吗?(手机、平板电脑等)
排水沟是由左右填充构成的,您可以使用媒体查询来根据您的屏幕尺寸进行更改:
/* 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;
}
}
一个更强大的解决方案,使用引导混合:
@sm-gutter: 10px;
@md-gutter: 50px;
@lg-gutter: 100px;
.my-container {
@media (min-width: @screen-sm-min) {
width: @container-sm;
.container-fixed(@gutter: @sm-gutter);
}
@media (min-width: @screen-md-min) {
width: @container-md;
.container-fixed(@gutter: @md-gutter);
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
.container-fixed(@gutter: @lg-gutter);
}
}
.my-row {
@media (min-width: @screen-sm-min) {
.make-row(@gutter: @sm-gutter);
}
@media (min-width: @screen-md-min) {
.make-row(@gutter: @md-gutter);
}
@media (min-width: @screen-lg-min) {
.make-row(@gutter: @lg-gutter);
}
}
.my-4-col {
@media (min-width: @screen-sm-min) {
.make-sm-column(4, @sm-gutter);
}
@media (min-width: @screen-md-min) {
.make-md-column(4, @md-gutter);
}
@media (min-width: @screen-lg-min) {
.make-lg-column(4, @lg-gutter);
}
}
使用 LESS mixin 和“col”类的简单解决方案:
.reduce-gutter(@size: 5px) {
.row {
.make-row(@size);
}
.row .col:first-child,
.row .col:last-child {
padding-right: @size;
padding-left: @size;
}
}
我使用标准(30px)装订线尺寸,但在我的装订线为 6px 的小型设备上除外:
@media (max-width: $screen-sm-min - 1) {
$grid-gutter-width: 6px; // redefining
// also redefine $navbar-padding-horizontal in the scope because it depend on $grid-gutter-width
$navbar-padding-horizontal: floor(($grid-gutter-width / 2));
@import "../bootstrap/bootstrap/forms";
@import "../bootstrap/bootstrap/grid";
@import "../bootstrap/bootstrap/navbar";
}
我尝试重写 Bootstrap mixin,以便为 XS 宽度设置一半的正常网格间距。似乎工作正常。
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
@media(max-width: @screen-xs-min) {
padding-left: (@gutter / 4);
padding-right: (@gutter / 4);
};
}
.make-row(@gutter: @grid-gutter-width) {
@media(max-width: @screen-xs-min) {
margin-left: (@gutter / -4);
margin-right: (@gutter / -4);
}
}
.container-fixed() {
@media(max-width: @screen-xs-min) {
padding-left: (@grid-gutter-width / 4);
padding-right: (@grid-gutter-width / 4);
}
}