Bootstrap 3-将区域与.container内的列对齐，将大小与视口边缘对齐 [英] Bootstrap 3 - align area to a column inside .container, size to edge of view port

问题描述

收到了我一生都无法解决的设计要求。请考虑以下图像，该图像显示了具有12列布局的引导网格：

三个黑色矩形表示：

1. 一列填充


2. 主要内容区域


3. 交互式地图

部分 3 是问题；它必须完全关联到 .container 内的网格系统，并且还应一直向上到达屏幕边缘而不会溢出。由于 1 + 2 部分最多不增加6列，因此我很难确定部分 3 。

我还没有想出任何可行的解决方案-最接近的解决方案（仍然很遥远）是

之后-地图与固定宽度的引导网格和视口边缘对齐：

---

某些伪代码

 < div class = section left-content side-地图 
< div class = container> 
< div class = col-sm-8 col-lg-7 col-lg-offset-1> 
内容-保持不变
< / div> 
< div class = col-sm-4 col-lg-3 col-lg-offset-1> 
< div id = contact-map> 
此处映射-需要扩展到视口边缘
< / div> 
< / div> 
< / div> 
< / div> 
  

解决方案

解决此问题的另一种方法可以使用CSS Grid布局。为此，您可以更改页面部分的标记：摆脱Bootstrap的 .container 包装器并替换 .row 元素和您自己的网格容器，例如以下HTML：

 < div class = section左侧内容侧视图> 
< div class = grid-row> 
< div class = content col> 
内容-保持不变
< / div> 
< div class = map-col> 
<！-地图在这里-> 
< / div> 
< / div> 
< / div> 
  

和CSS：

  @media（最小宽度：768像素）{
 .grid-row {
 display：grid; 
 / *创建14列：12建立实际的网格，
多两列模拟左/右边距 * / 
 grid-template-columns：1fr repeat（12，60px） 1fr; 
} 
 
 .content {
网格列：3 /跨度7； / *从＃2（技术上，第3个）​​开始跨度7列* / 
} 
 
 .map-col {
 grid-column：10 / span 5; / *跨越最后5列，包括右边的边距 * / 
} 
 
} 
 
 @media（最小宽度：992px）{
 .grid-row {
 grid-template-columns：1fr repeat（12，80px）1fr; 
} 
} 
 
 @media（最小宽度：1200px）{
 .grid-row {
 grid-template-columns：1fr repeat（ 12，95px）1fr; 
} 
} 
  

此解决方案的关键部分是保证金吸收了主要12个网格列之外的额外水平空间的也是网格列（具有自动宽度），您可以使自己的块像其他任何网格一样跨这些额外的列，因此浏览器将自动为您完成所有大小估算。

您可以在Ilya Myasin的CodePen的此分支中看到这种方法的作用： https://codepen.io/SelenIT/pen/mjoomN?editors=1100 。我还在CSS Grid属性中添加了 -ms 前缀的等效项，以使演示也可以在IE10 +中工作。

Got a design request that I just cannot for the life of me work out. Consider this image showing the bootstrap grid with a 12-column layout:

The 3 black rectangles represent:

1. A column of padding
2. Main content area
3. Interactive map

Section 3 is the problem; it needs to be perfectly alligned to the grid system inside the .container, and also go right up to the edge of the screen without overflowing. As sections 1 + 2 don't add up to 6 columns, I'm having a hard time sizing section 3.

I haven't managed to come up with any viable solution- the closest (which is still pretty far) is to make use of pseudo-elements on the grid system - the only problem with that is it's not possible to put the map inside a pseudo-element.

Please note I already have a JavaScipt solution in place for the time being, I am looking for a CSS/HTML only solution to reduce flickering on page load.

---

As has been requested, here are some images that I hope will make the request clearer.

Before - there's a gap between the map and the edge of the viewport:

After - map is aligned to fixed-width bootstrap grid and the edge of the viewport:

---

Some pseudocode

<div class="section left-content side-map">
    <div class="container">
        <div class="col-sm-8 col-lg-7 col-lg-offset-1">
            Content - remain unchanged
        </div>
        <div class="col-sm-4 col-lg-3 col-lg-offset-1">
            <div id="contact-map">
                Map here - need to extend to viewport edge
            </div>
        </div>
    </div>
</div>

解决方案

Another approach to solve this issue can be using CSS Grid Layout. In order to do this, you can change a markup of the section of your page: get rid of the Bootstrap's .container wrapper and replace the .row element with your own grid container, like the following HTML:

<div class="section left-content side-map">
  <div class="grid-row">
    <div class="content col">
      Content - remain unchanged
    </div>
    <div class="map-col">
      <!-- the map goes here -->
    </div>
  </div>
</div>

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

The key part of this solution is that "margins" that absorb the extra horizontal space outside the main 12 grid columns are also grid columns (with automatic width), and you can make your blocks span these extra columns just like any other, so the browser will do all the sizing math for you automatically.

You can see this approach in action in this fork of the Ilya Myasin's CodePen: https://codepen.io/SelenIT/pen/mjoomN?editors=1100. I also added the -ms-prefixed equivalents to CSS Grid properties there to make the demo work in IE10+ as well.

这篇关于Bootstrap 3-将区域与.container内的列对齐，将大小与视口边缘对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！