如何自定义Bootstrap列宽？

Question

我有这个,但我觉得4对于我的侧边栏宽度太大而且3太小了(它必须加起来为12).

  <div class="col-md-8">
  <div class="col-md-4">

我试过这个,但它不起作用:

  <div class="col-md-8.5">
  <div class="col-md-3.5">

有没有其他方法可以获得类似的结果？

谢谢你的帮助!

Answer 1

要扩展@ isherwood的答案,这里是-sm-在Bootstrap 3.3中创建自定义宽度的完整代码

通常,您希望搜索现有的列宽(例如col-sm-3)并将所有适用于它的样式(包括通用样式)复制到定义新列宽度的自定义样式表中.

.col-sm-3half, .col-sm-8half {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-sm-3half, .col-sm-8half {
        float: left;
    }
    .col-sm-3half {
        width: 29.16666667%;
    }
    .col-sm-8half {
        width: 70.83333333%;
    }
}

Answer 2

对于12列网格,如果要为每个列宽添加一半列(4,16667%).这是你做的.

例如,对于col-md- X,使用以下值定义.col-md -X-5.

.col-md-1-5 { width: 12,5%; } // = 8,3333 + 4,16667
.col-md-2-5 { width: 20,83333%; } // = 16,6666 + 4,16667
.col-md-3-5 { width: 29,16667%; } // = 25 + 4,16667
.col-md-4-5 { width: 37,5%; } // = 33,3333 + 4,16667
.col-md-5-5 { width: 45,83333%; } // = 41,6667 + 4,16667
.col-md-6-5 { width: 54,16667%; } // = 50 + 4,16667
.col-md-7-5 { width: 62,5%; } // = 58,3333 + 4,16667
.col-md-8-5 { width: 70,83333%; } // = 66,6666 + 4,16667
.col-md-9-5 { width: 79,16667%; } // = 75 + 4,16667
.col-md-10-5 { width: 87,5%; } // = 83,3333 + 4,16667
.col-md-11-5 { width: 95,8333%; } // = 91,6666 + 4,16667

我舍入了某些值.

其次,为避免从原始col-md- X复制css代码,请在类声明中使用它们.请注意,应在修改之前添加它们.这样,只有宽度被覆盖.

<div class="col-md-2 col-md-2-5">...</div>
<div class="col-md-5">...</div>
<div class="col-md-4 col-md-4-5">...</div>

最后,不要忘记总数不应超过12列,总计100%.

我希望它有所帮助!

Answer 3

安东尼回答的Bootstrap 4.1+版本：

Bootstrap mixin 现在是 @include make-col($size, $columns: $grid-columns)

.col-md-8half {
  @include make-col-ready();

  @include media-breakpoint-up(md) {
    @include make-col(8.5);
  }
}

.col-md-3half {
  @include make-col-ready();

  @include media-breakpoint-up(md) {
    @include make-col(3.5);
  }
}

来源：

• 官方文档
• Bootstrap 4 Sass Mixins [带有示例的备忘单]

Answer 4

你当然可以创建自己的类:

.col-md-3point5 {width: 28.75%}
.col-md-8point5 {width: 81.25%;}

在我搞乱默认列之前,我会这样做.您可能想要使用这些内部的那些.

您可能还希望将它们放在媒体查询语句中,以便它们仅适用于大于移动屏幕的大小.

Answer 5

您可以使用Bootstrap自己的列mixins make-xx-column()：

.col-md-8half {
    .make-md-column(8.5);
}

.col-md-3half {
    .make-md-column(3.5);
}