gpt4 book ai didi

css - 如何覆盖两个不同页面的 Bootstrap 容器类

转载 作者:太空宇宙 更新时间:2023-11-04 12:50:11 25 4
gpt4 key购买 nike

我有两个页面:landing 和 home。我想为两个页面设置不同的容器宽度、@gutter-width 和@column-width。如何实现?

我正在使用 less 框架并连接所有 less 文件,同时构建要部署到生产环境的代码。现在一个页面的样式正在影响其他页面。

最佳答案

您可以像这样更 retrofit 订线宽度(例如 3% 装订线)

演示:http://jsbin.com/jeqase/1/

.alt-grid .row {margin-left:-1.5%;margin-right:-1.5%;}
.alt-grid [class*="col-"] {padding-left:1.5%;padding-right:1.5%}

HTML

<body class="alt-grid">

那么所有的[class*="col-"]和所有的.row都会受到影响。

上面的示例是将 alt-grid 类放在 .row > .col-*-* 周围的主体或容器上,但您也可以将它放在 .row 本身...

<div class="row alt-grid">...</div>

CSS

.alt-grid.row {margin-left:-1.5%;margin-right:-1.5%;}
.alt-grid [class*="col-"] {padding-left:1.5%;padding-right:1.5%}

.container 的宽度也可以调整:

<div class="container">...</div>

.alt-grid .container { /* assumes that the .alt-grid is on the body or html tag*/
width:100%;
max-width:1600px;
}

如果您在调整后的 .container 左右添加填充,它必须等于 .row 边距的负值。对于这个例子,它必须在左边和右边至少有 1.5% 的填充。 15px padding 是默认的,在这个例子中它不会干扰。如果您没有与该行的负边距相同或更多的填充,水平条自然会出现。

关于css - 如何覆盖两个不同页面的 Bootstrap 容器类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26194428/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com