CSS 如何自定义 Bootstrap 列宽？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28750907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Customize Bootstrap Column Widths?
提问by AnthonyGalli.com
I have this, but I feel 4 is too big for my sidebar width and 3 is too small (it has to add up to 12).
我有这个，但我觉得 4 对我的侧边栏宽度来说太大了，而 3 太小了（它必须加起来为 12）。
<div class="col-md-8">
<div class="col-md-4">
I tried this but it doesn't work:
我试过这个，但它不起作用：
<div class="col-md-8.5">
<div class="col-md-3.5">
Is there another way to get a similar outcome?
有没有另一种方法可以获得类似的结果？
Thanks for your help!
谢谢你的帮助！
采纳答案by Tobia
To expand on @isherwood's answer, here is the complete code for creating custom -sm-widths in Bootstrap 3.3
为了扩展@isherwood 的答案，这里是-sm-在 Bootstrap 3.3 中创建自定义宽度的完整代码
In general you want to search for an existing column width (say col-sm-3) and copy over all the styles that apply to it, including generic ones, over to your custom stylesheet where you define new column widths.
通常，您希望搜索现有的列宽（例如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%;
}
}
回答by Wawa Loo
For a 12 columns grid, if you want to add half of a column (4,16667%) to each column width. This is what you do.
对于 12 列的网格，如果您想将一列的一半 (4,16667%) 添加到每个列宽。这是你做的。
For example, for col-md-X, define .col-md-X-5with the following values.
例如，对于 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
I rounded certain values.
我舍入了某些值。
Secondly, to avoid copying css code from the original col-md-X, use them in the class declaration. Be careful that they should be added beforeyour modified ones. That way, only the width gets override.
其次，为了避免从原始 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>
Finally, don't forget that the total should not exceed 12 columns, which total 100%.
最后，不要忘记总数不应超过 12 列，总数为 100%。
I hope it helps!
我希望它有帮助！
回答by isherwood
You could certainly create your own classes:
您当然可以创建自己的类：
.col-md-3point5 {width: 28.75%}
.col-md-8point5 {width: 81.25%;}
I'd do this before I'd mess with the default columns. You may want to use those inside these.
在弄乱默认列之前，我会这样做。你可能想使用这些里面的那些。
You'd probably also want to put those inside a media query statement so that they only apply for larger-than-mobile screen sizes.
您可能还想将它们放在媒体查询语句中，以便它们仅适用于大于移动设备的屏幕尺寸。
回答by Antoni
You can use Bootstrap's own column mixins make-xx-column():
您可以使用 Bootstrap 自己的列混合make-xx-column()：
.col-md-8half {
.make-md-column(8.5);
}
.col-md-3half {
.make-md-column(3.5);
}
回答by Mario Steingruber
Bootstrap 4.1+version of Antoni's answer:
安东尼回答的Bootstrap 4.1+版本：
The Bootstrap mixin is now @include make-col($size, $columns: $grid-columns)
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);
}
}
Source:
来源：
回答by Herman Nz
you can customize bootstrap stylesheet, as in:
您可以自定义引导程序样式表，如下所示：
.col-md-8{
width: /*as you wish*/;
}
Then, set the media query for that too, as in:
然后，也为此设置媒体查询，如下所示：
@media screen and (max-width:768px){
.col-md-8{
width:99%;
}
}
