带有calc（）的Bootstrap SASS容器尺寸

Question

有没有办法让xl屏幕的Bootstrap容器100％-246px？

我尝试在variables.scss文件中进行此更改但是当我尝试使用相同值的百分比和像素时，它给了我一个错误。

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: calc(100% - 246px)  <- this is when I get an error
) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths");

另一种解决方法可能是将每侧的容器填充增加到123px，但不确定要更改哪个变量来实现。

Answer 1

最简单的方法是使用.container-fluid类，使用两边的边距来获得所需的比例。

https://codepen.io/sidhuko/pen/QMKjQx

HTML：

<div class="example container-fluid">
  Test
</div>

CSS：

.example {
  margin: 0 123px;
}