如何自定义引导列宽？

Posted 2023-02-16

【中文标题】如何自定义引导列宽？

【英文标题】：How to Customize Bootstrap Column Widths?

【发布时间】：2015-04-29 07:53:54

【问题描述】：

我有这个，但我觉得 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">

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

感谢您的帮助！

【问题讨论】：

更改为 16 或 24 列布局以获得更大的灵活性：***.com/questions/11591185/…

您的网站响应速度快吗？最好将您的内容配置为更轻松地流动。在当今的网络中，很少有侧边栏总是具有相同的宽度。

【参考方案1】：

为了扩展@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%;
    

【参考方案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%。

希望对你有帮助！

【参考方案3】：

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

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

在我弄乱默认列之前，我会这样做。你可能想使用这些里面的那些。

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

【参考方案4】：

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);
  

---

来源：

Official documentation Bootstrap 4 Sass Mixins [Cheat sheet with examples]

【参考方案5】：

你可以使用Bootstrap自带的列mixinsmake-xx-column()：

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


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

【参考方案6】：

您可以自定义引导样式表，如下所示：

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

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

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