我可以在Bootstrap中使用col-md-1.5吗？

Question

我可以在Bootstrap中使用col-md-1.5吗？

htmltwitter-bootstrap

107

我想调整Twitter Bootstrap中的列。

我知道在Bootstrap中有12列网格。是否有办法操纵网格以得到1.5 3.5 3.5 3.5，而不是3 3 3 3？

- Sandhya Gor

2

正如@bodi0所说，这是不可能的。你要么必须扩展Bootstrap的网格系统（你可以搜索并找到各种解决方案），要么使用嵌套行，例如http://www.bootply.com/dd50he9tGe。在嵌套行的情况下，您可能无法始终获得完全相同的结果，但会得到类似的结果。 - Tasos K.

1

@TasosK，你的示例对我有用，你可以将其写在答案中，我会接受它。谢谢。 - Sandhya Gor

很好，我发布了一个答案。 - Tasos K.

如果使用v4，请查看此链接 - https://dev59.com/G2Eh5IYBdhLWcg3w12il#46838552 - Adarsh Madrecha

12个回答

86

正如@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>

- Tasos K.

9

简短的回答是不行（技术上你可以给类起任何想要的名称，但这没有效果，除非你定义自己的CSS类 - 记住 - 类选择器中没有点号）。长答案也是不行，因为Bootstrap包括响应式、移动优先的流体网格系统，随着设备或视口大小的增加适当地扩展到12列。

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

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

解决问题的一个可能方法是定义自己的CSS类，带有所需的宽度，比如.col-half{width:XXXem !important}，然后将此类添加到您想要的元素中，以及原始的Bootstrap CSS类。

- Bud Damyanov

9

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

- Rex Bloom

5

我已经创建了一个自定义的Bootstrap扩展，使您可以使用以下类：（参见链接）。

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

- Hooman Bahreini

3

根据 Rex Bloom 的回复，我已经编写了一个 Bootstrap 辅助程序：

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

- Mickael Belhassen

2

创建新的类来覆盖宽度。请查看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;
}

- JCoupland

2

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

- Aguma Chales

1

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

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

- Muhammad Soliman

1

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

- Vahid Alvandi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Balraj Singh Bains · Accepted Answer

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

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