html – Bootstrap 3 – 将区域对齐到.container中的列,大小到视图端口的边缘

概述有一个设计要求,我不能为我的生活工作.请考虑此图像显示具有12列布局的引导网格： 3个黑色矩形代表： >一列填充 >主要内容区域 >交互式地图 第3节是问题;它需要与.container中的网格系统完美对齐,并且一直到屏幕边缘而不会溢出.由于第1节不添加6列,我很难确定第3节的大小. 我还没有设法提出任何可行的解决方案 – 最接近(仍然很远)到make use of pseudo-elements 有一个设计要求,我不能为我的生活工作.请考虑此图像显示具有12列布局的引导网格：

3个黑色矩形代表：

>一列填充
>主要内容区域
>交互式地图

第3节是问题;它需要与.container中的网格系统完美对齐,并且一直到屏幕边缘而不会溢出.由于第1节不添加6列,我很难确定第3节的大小.

我还没有设法提出任何可行的解决方案 – 最接近(仍然很远)到make use of pseudo-elements on the grid system – 唯一的问题是它不可能将地图放在伪元素中.

请注意我暂时已经有了JavaScipt解决方案,我正在寻找一种仅限CSS / HTML的解决方案来减少页面加载时的闪烁.

正如所要求的,这里有一些我希望将使请求更清晰的图像.

之前 – 地图与视口边缘之间存在间隙：

后映射与固定宽度引导网格和视口边缘对齐：

一些伪代码

<div >    <div >        <div >            Content - remain unchanged        </div>        <div >            <div ID="contact-map">                Map here - need to extend to vIEwport edge            </div>        </div>    </div></div>

解决方法 解决此问题的另一种方法是使用CSS网格布局.为此,您可以更改页面部分的标记：删除bootstrap的.container包装并将.row元素替换为您自己的网格容器,如下面的HTML：

<div >  <div >    <div >      Content - remain unchanged    </div>    <div >      <!-- the map goes here -->    </div>  </div></div>

和CSS：

@media (min-wIDth: 768px) {  .grID-row {    display: grID;    /* create 14 columns: 12 build up the actual grID,two more columns emulate left/right "margins" */    grID-template-columns: 1fr repeat(12,60px) 1fr;  }   .content {    grID-column: 3 / span 7; /* span 7 columns starting from #2 (technically,the 3rd) */  }  .map-col {    grID-column: 10 / span 5; /* span 5 last columns,including the right "margin" */  }}@media (min-wIDth: 992px) {  .grID-row {    grID-template-columns: 1fr repeat(12,80px) 1fr;  }}@media (min-wIDth: 1200px) {  .grID-row {    grID-template-columns: 1fr repeat(12,95px) 1fr;  }}

这个解决方案的关键部分是吸收主要12个网格列之外的额外水平空间的“边距”也是网格列(具有自动宽度),并且您可以使您的块像任何其他列一样跨越这些额外的列,因此浏览器会自动为您完成所有大小调整数学运算.

您可以在Ilya Myasin的CodePen：https://codepen.io/SelenIT/pen/mjoomN?editors=1100的这个分支中看到这种方法.我还在那里添加了CSS网格属性的-ms-prefixed等价物,以便在IE10中进行演示.

总结

以上是内存溢出为你收集整理的html – Bootstrap 3 – 将区域对齐到.container中的列,大小到视图端口的边缘全部内容，希望文章能够帮你解决html – Bootstrap 3 – 将区域对齐到.container中的列,大小到视图端口的边缘所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。