如何更改默认引导流体网格12列装订线宽度(How to Change Default Bootstr

2019-07-19 18:25发布

我期待知道是否有已知的与流体默认的12电网引导系统(2.3.0),就可以改变排水沟任何简单的解决方案。

我不熟悉的少,但如果是这样的答案,也请您介绍了如何可以改变。 与萨斯一样。

请注意,这是完全可以接受的改变装订线宽度, 减少了一半四分之一 ,例如,如果可能使事情变得更简单。

以下目标必须满足:

  1. 必须能够在未来的更新引导。 这意味着不编辑实际的引导文件。
  2. 功能应该仍然是所有其他对象。
  3. 必须简单。 不到10行的CSS。 例如,添加的类或某事。

找遍了整个堆栈溢出,并且仍然不知道我怎么会去这样做这样的事情。 尽我的理解, 下载定制引导只呈现了非流体格的自定义装订线宽度 。 我以前已经编写我自己的流体网格系统,所以我理解的数学,但我担心可能存在的后果,这将是有益的,如果对此类重写任何已知的问题,可以共享。

我答应给信贷,这是因为。

更新:

更改少变量在尤达的答案描述是要走的路。 没有人有任何改变这些变量少经验? 举例来说,我认为必须要改变的变量如下:

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

如果有人这样做之前,我希望在正确的方向上推。

Answer 1:

最简单的方法可能是使用Twitter的引导提供可定制的下载。 更改@fluidGridGutterWidth变量,以适应​​形式您的需求。 从这里下载减档 。 您可以从github上引导项目访问variable.less文件,然后修改这一段代码:

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

我还以为你有机会访问较少的文件在第一,然后我意识到你正在使用的网站上定制的GUI。 只需下载更少的文件,并进行更改。 然后编译减档给你一个CSS文件或使用较少的发展。 您可以使用CSS或min.css部署。



Answer 2:

我想你可能会思前想。 与改变LESS变量的问题是,它会改变所有的排水沟。 所以,如果我喜欢安排在所有布局15px的阴沟里,但不想被5PX为网格它不会在里面工作形式的排水沟。

只要创建2个CSS类来覆盖你想改变墨槽的区域。

在“行”级应用此。

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

在“列”级别应用此。

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

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



Answer 3:

我一直在寻找这个问题的简单的解决方案了。 我的目标是使用简单的CSS,而不是更少。 这个答案如其他人一样,我发现的基础上,编制少用或使用引导程序的在线编译器。 所以,我试图找到自己的解决方案。

读你的文档会发现下面的有关水槽宽度:列通过填充创建排水沟(列内容之间的差距)。 也就是说填充在排用于经由上.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像素的沟槽宽度。

我没有你可以用引导所有可能的方案测试这一点。 特别是你必须要注意只使用列div的一个容器DIV内的行DIV中。 但对我来说这是不接触引导的起源源代码或使用LESS编译一个非常有效的解决方案。



文章来源: How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width