我一直在尝试制作一个 Bootstrap 容器,它“溢出”到页面的右侧,但也与标准的 Bootstrap 容器对齐。到目前为止,我已经尝试复制标准容器的代码并更改 max-width
值,但我似乎永远无法使它与标准容器保持一致。这是我目前所拥有的:
width: 100%;
padding-left: 15px;
margin-left: auto;
margin-top: 3rem;
@media (min-width: 576px) {
max-width: 675px;
}
@media (min-width: 768px) {
max-width: 900px;
}
@media (min-width: 992px) {
max-width: 1200px;
}
@media (min-width: 1200px) {
max-width: 1425px;
}
谁能帮我实现这个目标?
最佳答案
您可以根据每个断点的 Bootstrap container
宽度计算自定义容器宽度的左边距。为了使其与容器对齐,左边距将是:
margin-left: calc(50vw - (container width/2))
所以 CSS 将是:
.container-custom {
padding-left: 15px;
padding-right: 15px;
}
@media (min-width:576px){
.container-custom {
margin-right: 0;
margin-left: calc(50vw - 270px);
}
}
@media (min-width:768px){
.container-custom {
margin-right: 0;
margin-left: calc(50vw - 360px);
}
}
@media (min-width:992px){
.container-custom {
margin-right: 0;
margin-left: calc(50vw - 480px);
}
}
@media (min-width:1200px){
.container-custom {
margin-right: 0;
margin-left: calc(50vw - 570px);
}
}
关于css - 右对齐的 Bootstrap 容器,它也与默认容器对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56778466/