我可以在引导程序中给出 col-md-1.5 吗？答案

【问题标题】：Can I give the col-md-1.5 in bootstrap?我可以在引导程序中给出 col-md-1.5 吗？
【发布时间】：2015-07-13 15:29:28
【问题描述】：

我想调整 Twitter Bootstrap 中的列。

我知道在引导程序中有 12 列网格。有什么方法可以将网格操作为 1.5 3.5 3.5 3.5 而不是 3 3 3 3？

【问题讨论】：

正如@bodi0 正确所说，这是不可能的。您要么必须扩展 Bootstrap 的网格系统（您可以搜索并找到各种解决方案），要么使用嵌套行，例如bootply.com/dd50he9tGe。在嵌套行的情况下，您可能并不总是得到准确的结果，但会得到类似的结果。
@TasosK。您的示例对我有用，您可以将其写在答案中，我会接受。谢谢
太好了，我发了答案
如果使用 v4，请查看 - stackoverflow.com/a/46838552/4050261

【解决方案1】：

你也只是简单地覆盖了 Column 的宽度...

<div class="col-md-1" style="width: 12.499999995%"></div>

由于col-md-1 的宽度为 8.33333333%；只需乘以 8.33333333 * 1.5 并将其设置为您的宽度。

在bootstrap 4 中，您也必须覆盖 flex 和 max-width 属性：

<div class="col-md-1" style="width: 12.499999995%;
    flex: 0 0 12.499%;max-width: 12.499%;"></div>

【讨论】：

出色的作品很棒，节省了我的时间。仍然保持其响应能力
但ml-sm-auto 类仍会忽略此自定义宽度值：/（因此页面响应会中断）
很好，但你为什么不直接使用 12.5，因为那是实际的确切结果？ :)
完美运行 - 花了好几个小时试图将 3 个 div 永远居中对齐！谢谢！

【解决方案2】：

作为@bodi0 correctly said，这是不可能的。您要么必须扩展 Bootstrap 的网格系统（您可以搜索并找到各种解决方案，here 是一个 7 列示例）或使用嵌套行，例如http://bootply.com/dd50he9tGe。

在嵌套行的情况下，您可能并不总是得到准确的结果，而是一个相似的结果

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>    
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>    
    </div>
</div>

【讨论】：

【解决方案3】：

简短的回答是否（从技术上讲，你可以给你想要的类的任何名称，但这不会有任何效果，除非你定义自己的 CSS 类 - 并记住 - 否类选择器中的点）。长答案再次是否，因为Bootstrap includes a responsive，移动优先的流体网格系统随着设备或视口大小的增加而适当地扩展到12 列。

行必须放置在.container（固定宽度）或.container-fluid（全宽度）内，以便正确对齐和填充。

使用行来创建水平列组。
内容应放在列中，并且只有列可以是行的直接子级。
预定义的网格类如.row 和.col-xs-4 可用于快速制作网格布局。更少的 mixin 也可以用于更多的语义布局。
列通过填充创建装订线（列内容之间的间隙）。该填充通过.rows 上的负边距在第一列和最后一列的行中偏移。
通过指定您希望跨越的十二个可用列的数量来创建网格列。例如，三个相等的列将使用三个 .col-xs-4。
如果在一行中放置了超过 12 列，则每组额外的列将作为一个单元换行。
网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，例如将任何.col-md-* 类应用于元素将不仅影响其在中型设备上的样式，而且如果.col-lg-* 类不存在，也会影响大型设备上的样式。

解决您的问题的一个可能方法是使用期望宽度定义您自己的 CSS 类，比如说.col-half{width:XXXem !important}，然后将该类与原始 Bootstrap CSS 类一起添加到您想要的元素中。

【讨论】：

【解决方案4】：

Bootstrap 4 使用 flex-box，您可以创建自己的列定义

这接近 1.5，根据您自己的需要进行调整。

.col-1-5 {
    flex: 0 0 12.3%;
    max-width: 12.3%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

【讨论】：

【解决方案5】：

Bootstrap 具有列偏移量，因此如果您希望列具有相同宽度而不指定大小，请使用它。

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

也可以看看这个链接 https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints

【讨论】：

【解决方案6】：

我创建了一个custom bootstrap extension，允许您使用以下类：

// replace * with a number between 0 and 11
col-*-1qtr
col-*-half
col-*-3qtr

另外请注意，您可以使用响应式类，例如：

col-sm-2-half (2.5)
col-md-0-3qtr (0.75)
col-lg-11-1qtr (11.25)
col-xl-5-half (5.5)

这是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hoomanbahreini/bootstrap-half-and-quarter-grid/fractional-grid.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Using fraction of columns</h2>
  <div class="row">
    <div class="col-2-3qtr bg-success">col-2-3qtr (2.75)</div>
    <div class="col-3-1qtr bg-warning">col-3-1qtr (3.25)</div>
    <div class="col-3-half bg-success">col-3-half (3.5)</div>
    <div class="col-2-half bg-warning">col-2-half (2.5)</div>
  </div>
</div>

</body>
</html>

【讨论】：

【解决方案7】：

创建新类以覆盖宽度。工作代码见jFiddle。

<div class="row">
  <div class="col-xs-1 col-xs-1-5">
    <div class="box">
      box 1
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 2
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 3
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 4
    </div>
  </div>
</div>

.col-xs-1-5 {
  width: 12.49995%;
}
.col-xs-3-5 {
  width: 29.16655%;
}
.box {
  border: 1px solid #000;
  text-align: center;
}

【讨论】：

【解决方案8】：

根据 Rex Bloom 的回复，我编写了一个引导帮助程序：

//8,33333333% col-1

.extra-col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-0-5 {
  @extend .extra-col;
  flex: 0 0 4.16666667%;
  max-width: 4.16666667%;
}

.col-1-5 {
  @extend .extra-col;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.col-2-5 {
  @extend .extra-col;
  flex: 0 0 20.833333325%;
  max-width: 20.833333325%;
}

.col-3-5 {
  @extend .extra-col;
  flex: 0 0 29.166666655%;
  max-width: 29.166666655%;
}

.col-4-5 {
  @extend .extra-col;
  flex: 0 0 37.499999985%;
  max-width: 37.499999985%;
}

.col-5-5 {
  @extend .extra-col;
  flex: 0 0 45.833333315%;
  max-width: 45.833333315%;
}

.col-6-5 {
  @extend .extra-col;
  flex: 0 0 54.166666645%;
  max-width: 54.166666645%;
}

.col-7-5 {
  @extend .extra-col;
  flex: 0 0 62.499999975%;
  max-width: 62.499999975%;
}

.col-8-5 {
  @extend .extra-col;
  flex: 0 0 70.833333305%;
  max-width: 70.833333305%;
}

.col-9-5 {
  @extend .extra-col;
  flex: 0 0 79.166666635%;
  max-width: 79.166666635%;
}

.col-10-5 {
  @extend .extra-col;
  flex: 0 0 87.499999965%;
  max-width: 87.499999965%;
}

.col-11-5 {
  @extend .extra-col;
  flex: 0 0 95.8333333%;
  max-width: 95.8333333%;
}

【讨论】：

【解决方案9】：

这不是提供 col-md-1.5 的 Bootstrap 标准，您不能编辑 bootstrap.min.css，因为这不是正确的方法。你可以像这样创建http://www.bootply.com/125259

【讨论】：

【解决方案10】：

正如其他人在 Bootstrap 3 中提到的，您可以使用嵌套/嵌入技术。

然而，现在使用 Bootstrap 4 中非常棒的功能变得越来越明显。您可以选择使用col-{breakpoint}-auto 类（例如col-md-auto）根据其内容的自然宽度自动调整列大小。检查this for example

【讨论】：

【解决方案11】：

您可以在 col-md-3 , col-md-9 中使用此代码

.col-side-right{
  flex: 0 0 20% !important;
  max-width: 20%;
}

.col-side-left{
  flex: 0 0 80%;
  max-width: 80%;
}

【讨论】：

【解决方案12】：

这个问题已经很老了，但我已经这样做了（在 TYPO3 中）。

首先，我创建了一个自己的可访问的 css 类，我可以在每个内容元素上手动选择它。

然后，我做了一个11列（1 - 9 - 1）的外部三列元素，最后，我用CSS修改了第一列和第三列的列宽为12.499999995%。

【讨论】：