右对齐的 Bootstrap 容器也与默认容器对齐 [英] Right aligned Bootstrap container which also aligns with default container

问题描述

我一直在尝试制作一个溢出"的 Bootstrap 容器.到页面的右侧，但也与标准 Bootstrap 容器对齐.到目前为止，我已经尝试复制标准容器的代码并更改 max-width 值，但我似乎无法使其与标准容器对齐.这是我目前所拥有的:

 宽度:100%；左边距:15px；左边距:自动；边距顶部:3rem；@media(最小宽度:576px){最大宽度:675px；}@media(最小宽度:768px){最大宽度:900px；}@media(最小宽度:992px){最大宽度:1200px；}@media(最小宽度:1200px){最大宽度:1425px；}

有人能帮我实现这个目标吗?

解决方案

您可以根据每个断点的 Bootstrap container 宽度计算自定义容器宽度的左边距.为了使其与容器对齐，左边距将是:

margin-left: calc(50vw - (container width/2))

所以 CSS 应该是:

.container-custom {左边距:15px；padding-right: 15px;}@media(最小宽度:576px){.container-custom {右边距:0;margin-left: calc(50vw - 270px);}}@media(最小宽度:768px){.container-custom {右边距:0;margin-left: calc(50vw - 360px);}}@media(最小宽度:992px){.container-custom {右边距:0;margin-left: calc(50vw - 480px);}}@media(最小宽度:1200px){.container-custom {右边距:0;margin-left: calc(50vw - 570px);}}

演示:https://www.codeply.com/go/gO5EmIIeDi

I've been trying to make a Bootstrap container which "spills out" onto the right hand side of the page but also aligns well with the standard Bootstrap container. So far I have tried duplicating the code for the standard container and altering the max-width values but I can't ever seem to make this align with the standard container. Here is what I have so far:

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

Would anyone be able to help me achieve this?

解决方案

You can calculate the left margin of the custom container width based on the Bootstrap container width for each breakpoint. In order for it to align with container, the left margin is going to be:

margin-left: calc(50vw - (container width/2))

So the CSS would be:

.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);
  }
}

Demo: https://www.codeply.com/go/gO5EmIIeDi

这篇关于右对齐的 Bootstrap 容器也与默认容器对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！