在 Bootstrap 4 中，我被要求自定义桌面的默认网格系统，如下所示：
其中，容器&桌面断点为1280px。
我尝试过的例子是：
body {
margin-top: 3rem;
}
.l-wrap {
max-width: 1280px;
margin-right: auto;
margin-left: auto;
}
.grid-item {
width: calc((100% - 50px * 11) / 12);
margin-top: 24px;
margin-right: 50px;
float: left;
}
/* For a 3-column grid */
.grid-item:nth-child(1n+12) {
margin-right: 0;
float: right;
}
/* Demo purposes */
.grid-item {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
text-align: center;
background: rgba(255, 0, 0, 0.25);
}
<div class="l-wrap">
<div class="col-grid">
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
</div>
</div>
这工作得很好。但我试图在 Bootstrap 中实现同样的目标。
The gutter width is 50px但它就在其中container.
这应该给我一个column width = 61px就像我的排水沟一样50*11 = 550。所以 1280-550/12 = 60.83。
默认情况下，引导程序从任一侧离开装订线。
我尝试过的解决方案
我尝试分别从第一列和最后一列向左填充和向右填充，使网格列具有不同的宽度（Problem)
尝试利用SCSSmixin 生成列
@include media-breakpoint-up('lg', $breakpoints) {
@for $i from 1 through $columns {
.col#{$infix}-#{$i} {
padding-right: 0;
padding-left: 0;
@include make-col($i, $columns);
}
}
}
这样，我可以从任一侧删除填充，然后在其顶部添加自定义 CSS 来实现此行为，但没有success
如果有人能指导如何在 Bootstrap 中实现这一目标，谢谢？
Susy 的容器和装订线的狭窄效果可以在 Bootstrap 中使用三个关键更改轻松实现：
-
省略使用container or container-fluid class, 如文档中所述 https://getbootstrap.com/docs/4.1/layout/grid/#no-gutters.
编辑：如果您需要将容器限制为 1280px，请检查下面的编辑。
将列的默认内边距设置为每侧 25 像素（因此总共 50 像素），而不是初始的总共 30 像素
通过将默认值修改为，调整行上的负边距以反映装订线变化-25px每边的边距
所以本质上你的 CSS 是：
.row {
margin-left: -25px;
margin-right: -25px;
}
.col,
[class*="col-"] {
padding-right: 25px;
padding-left: 25px;
}
这种方法的一个优点是它的响应能力——它不会锁定任何屏幕尺寸，例如 1280px。这可以在行动中看到jsfiddle 片段 https://jsfiddle.net/siavasfiroozbakht/syrv7mab/或以下。在前者中添加了一些用于调试和测试的响应式宽度输出，为简洁起见，在下面的代码片段中省略了这些输出。
编辑：如果您需要将容器大小限制为 1280px，您可以这样做：
@media (min-width: 1280px) {
.container {
max-width: 1280px;
padding-left: 0;
padding-right: 0;
}
}
上面的内容将确保当屏幕宽度或更大时容器保持在最大 1280px，或者当屏幕宽度小于 1280px 时坚持默认的 Bootstrap 响应能力。如果您确实希望始终将其设置为 1280 像素，请删除媒体断点并将宽度和最大宽度设置为 1280 像素。
#example-row {
background: #0074D9;
margin-top: 20px;
}
.example-content {
display: flex;
height: 80px;
background-color: #FFDC00;
text-align: center;
align-items: center;
justify-content: center;
}
.row {
margin-left: -25px;
margin-right: -25px;
}
.col,
[class*="col-"] {
padding-right: 25px;
padding-left: 25px;
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
padding-left: 0;
padding-right: 0;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container" id="example-container">
<div class="row" id="example-row">
<div class="col-1">
<div class="example-content">Grid Item</div>
</div>
<div class="col-1">
<div class="example-content">Grid Item</div>
</div>
<div class="col-1">
<div class="example-content">Grid Item</div>
</div>
<div class="col-1">
<div class="example-content">Grid Item</div>
</div>
<div class="col-1">
<div class="example-content">Grid Item</div>
</div>
<div class="col-1">
<div class="example-content">Grid Item</div>
</div>
<div class="col-1">
<div class="example-content">Grid Item</div>
</div>
<div class="col-1">
<div class="example-content">Grid Item</div>
</div>
<div class="col-1">
<div class="example-content">Grid Item</div>
</div>
<div class="col-1">
<div class="example-content">Grid Item</div>
</div>
<div class="col-1">
<div class="example-content">Grid Item</div>
</div>
<div class="col-1">
<div class="example-content">Grid Item</div>
</div>
</div>
</div>
所有这些也可以使用 SASS 在源代码中完成 –检查 Bootstrap 文档 https://getbootstrap.com/docs/4.3/layout/overview/#containers对于混合。
最后，如果您确实需要仅针对某些特殊内容对默认大小进行这些更改，请将上面的类更改为新名称（例如.container-1280）并相应地修改 HTML。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
