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的答案，以下是在Bootstrap 3.3中创建自定义~/.config/git/ignore宽度的完整代码

通常，您希望搜索现有的列宽（例如-sm-），并将适用于它的所有样式（包括通用样式）复制到定义新列宽度的自定义样式表中。 / p>

col-sm-3

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

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

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

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

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

Answer 4

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

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

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

Answer 5

您可以自定义引导程序样式表，如：

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

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

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

Answer 6

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

Bootstrap混合现在为@await Html.PartialAsync("_ValidationScriptsPartial")

@include make-col($size, $columns: $grid-columns)

来源：

如何自定义Bootstrap列宽？

6 个答案: