我可以在引导程序中输入col-md-1.5吗？

我想调整Twitter Bootstrap中的列。

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

正如@ bodi0正确说的那样，这是不可能的。您要么必须扩展Bootstrap的网格系统（可以搜索并找到各种解决方案，这里是一个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>

您也可以简单地覆盖列的宽度...

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

简短的回答是“否”（从技术上讲，您可以给您想要的类任何名称，但这不会起作用，除非您定义了自己的CSS类-并记住-类选择器中没有点）。长答案仍然是“否”，因为Bootstrap包括一个响应式，可移动的第一流体网格系统，该系统可随着设备或查看端口尺寸的增加而适当地扩展至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类一起添加到所需的元素中。

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

创建新的类以覆盖宽度。有关工作代码，请参见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;
}

就像在Bootstrap 3中提到的那样，您可以使用嵌套/嵌入技术。

但是，现在使用Bootstrap 4中的强大功能变得越来越明显。您可以简单地选择使用col-{breakpoint}-auto类（例如col-md-auto），以根据其内容的自然宽度自动调整列本身的大小。例如检查一下

根据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%;
}

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

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

您可以在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%;
}

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

首先，我制作了一个自己的可访问的CSS类，可以在每个内容元素上手动进行选择。

然后，我制作了一个具有11列（1-9-1）的外部三列元素，最后，使用CSS将第一和第三列的列宽修改为12.499999995％。