我有这个，但是我觉得 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">
还有其他方法可以获得类似的结果吗？
谢谢您的帮助！
如何自定义Bootstrap列宽度？
51
- AnthonyGalli.com
2
为了更灵活地使用，将布局更改为16列或24列：https://dev59.com/LGgu5IYBdhLWcg3wFDRr - isherwood
你的网站是否具有响应式设计？最好将内容配置为更易于流动。在当今的网络中，很少有侧边栏始终保持相同的宽度。 - isherwood
6个回答
33
针对 @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%;
}
}
- Tobia
24
如果你想在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％。
希望这能有所帮助！
- Wawa Loo
8
您可以自己创建类：
.col-md-3point5 {width: 28.75%}
.col-md-8point5 {width: 81.25%;}
在修改默认列之前，我建议先这样做。你可能想在这些内部使用它们。
你可能还想将它们放入媒体查询语句中，以便它们仅适用于大于移动屏幕尺寸的情况下。
- isherwood
7
Antoni回答的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);
}
}
来源：
- Mario Steingruber
6
您可以使用Bootstrap自带的列混合类make-xx-column()：
.col-md-8half {
.make-md-column(8.5);
}
.col-md-3half {
.make-md-column(3.5);
}
- user224851
3
您可以自定义Bootstrap样式表，例如：
.col-md-8{
width: /*as you wish*/;
}
接着，也需要设置媒体查询，例如：
@media screen and (max-width:768px){
.col-md-8{
width:99%;
}
}
- Joe Kdw
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接