帶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; 
}