Question

我想调整Twitter Bootstrap中的列。

我知道在bootstrap中有12列网格。有没有办法操纵网格有1.5 3.5 3.5 3.5而不是3 3 3 3？

Answer 1

你云也只是覆盖了列的宽度......

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

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

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

Answer 3

简短的回答是没有（从技术上讲，你可以提供你想要的任何类的名称，但除非你定义自己的CSS类，否则这将没有任何效果 - 并记住 - 否类选择器中的点）。长答案再次是否，因为Bootstrap includes a responsive移动的第一个流体网格系统在设备或视图端口大小增加时适当扩展到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类。

Answer 4

创建新类以覆盖宽度。有关正常工作的代码，请参阅jFiddle。

import java.text.NumberFormat

Answer 5

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

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

Answer 6

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

Answer 7

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

Answer 8

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

setTest(val => val + 1)

也请查看此链接 https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints

Answer 9

这不是Bootstrap Standard给出col-md-1.5而你不能编辑bootstrap.min.css，因为它不是正确的方法。你可以像http://www.bootply.com/125259

那样创建

Answer 10

我创建了一个 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>

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

Answer 12

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

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

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

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

12 个答案: