如何自定义 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

您可以自定义 bootstrap 样式表，如：

.col-md-8{
  width: /*as you wish*/;
}

然后，也为其设置媒体查询，如：

@media screen and (max-width:768px){
  .col-md-8{
     width:99%;
   }
}

Answer 2

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

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

我会在弄乱默认列之前执行此操作。您可能想使用这些里面的那些。

您可能还想将它们放在媒体查询语句中，以便它们仅适用于大于移动设备的屏幕尺寸。

Answer 3

为了扩展@isherwood 的回答，这里是在 Bootstrap 3.3

中创建自定义 -sm- 宽度的完整代码

一般来说，您希望搜索现有的列宽（比如 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 4

对于 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 代码，请在 class 声明中使用它们。请注意，应将它们添加到 before 您修改过的。这样，只有宽度被覆盖。

<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 5

您可以使用 Bootstrap 自己的列混合 make-xx-column():

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

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

Answer 6

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 列宽？

How to Customize Bootstrap Column Widths?

css

sidebar

multiple-columns

twitter-bootstrap