如何更改默认的自举流体网格12列装订线宽度

CSS

Tom凯

2020-03-23

我期待知道是否有任何简单知与上改变沟液流体默认12电网引导系统（2.3.0）。

我不熟悉LESS，但是如果答案是正确的，还请描述如何进行更改。Sass也一样。

请注意，将装订线宽度更改为一半或四分之一是完全可以接受的，例如，如果这样做会使事情变得更简单。

必须实现以下目标：

  1. 将来必须能够更新引导程序。这意味着不编辑实际的引导文件。
  2. 所有其他对象都应保留功能。
  3. 必须简单。少于10行CSS。例如，添加的类或其他东西。

我在整个堆栈溢出中进行了搜索，但仍然不知道该怎么做。据我所知，下载定制的Bootstrap仅会为非流体网格呈现定制的装订线宽度。之前，我已经为自己的流体网格系统编写了代码，所以我理解数学，但是我担心这可能会带来后果，如果可以共享有关类重写的任何已知问题，这将很有帮助。

我保证在适当的时候给予信用。

更新：

按照Yoda的答案所述，更改较少的变量是可行的方法。有没有人有改变这些较小变量的经验？例如，我认为必须更改的变量如下：

// Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 768px-979px
@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);

如何改变这样的事情？也许：

@fluidGridGutterWidth768:      percentage(1.5);

如果有人以前这样做过，我将朝着正确的方向前进感到高兴。

第2832篇《如何更改默认的自举流体网格12列装订线宽度》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
老丝阿飞 2020.03.23

我也在寻找针对此问题的简单解决方案。我的目标是使用简单的CSS，而不是LESS。这个答案和我找到的其他答案一样，都是基于LESS编译或使用bootstrap在线编译器。所以我试图找到自己的解决方案。

阅读文档后，您会发现有关装订线宽度的以下信息：列通过填充创建装订线（列内容之间的间隙）。该填充通过.rows上的负边距在第一列和最后一列的行中偏移。

基于此，我尝试了以下操作：

.container {padding-left:1px;padding-right:1px;}
.row {margin-left:-1px;margin-right:-1px;}
.row > div {padding-left:1px;padding-right:1px;}

从现在起，装订线宽度仅为2像素。我的下一个问题是，我想要的宽度是一个奇数。我的解决方案是删除左侧的边距和边距，然后将其完全放在右侧：

.container {padding-left:0;padding-right:5px;}
.row {margin-left:0;margin-right:-5px;}
.row > div {padding-left:0;padding-right:5px;}

现在我有一个5像素的装订线宽度。

我没有在可以使用引导程序的所有可能的情况下对此进行测试。特别是您必须注意在container-div内的row-div内仅使用column-div。但就我而言，这是一个非常有效的解决方案，无需接触bootstrap的原始源代码或使用LESS编译器。

达蒙 2020.03.23

最简单的方法可能是使用Twitter Bootstrap提供的Customizable下载。更改@fluidGridGutterWidth变量以适合表单中的需求。从此处下载较少的文件。您可以从github bootstrap项目中访问variable.less文件，然后更改以下代码：

    // Fluid grid
// -------------------------
@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth); // <= this one

我以为您一开始只能访问较少的文件，然后才意识到您正在使用网站上的自定义gui。只需下载较少的文件，然后进行更改即可。然后编译较少的文件，以提供给您一个css文件或较少的用于开发。您可以使用css或min.css进行部署。

樱前端 2020.03.23

我认为您可能会考虑过度。更改LESS变量的问题在于，它将对所有装订线进行更改。因此，如果我喜欢15像素装订线用于排列整个布局，但希望该网格内的表单的装订线为5像素，则它将不起作用。

只需创建2个CSS类即可覆盖要更改装订线的区域。

在“行”级别应用此选项。

.row-5-gutter{
    margin-left: -5px;
    margin-right: -5px;
}

将其应用于“列”级别。

.col-5-gutter{
    padding-left: 5px;
    padding-right: 5px;
}

演示：http : //jsfiddle.net/tg7Ey/

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android