使用 Drupal Bootstrap 的 1170px 中间的全宽内容答案

【问题标题】：Full width content middle of 1170px using Drupal Bootsrap使用 Drupal Bootstrap 的 1170px 中间的全宽内容
【发布时间】：2014-07-04 22:59:23
【问题描述】：

我正在使用 Drupal Bootsrap 基本主题，并在其之上构建子主题。基本上，该网站是默认的 1170 像素宽，但在同一页面上的内容中间我想拥有浏览器全宽内容（最大 1400 像素）。但是由于 drupal Bootsrap 主题有一个 1170 宽的容器，我可以以某种方式使它在 div 的中间更宽吗？

<div class="main-container container">
  <div>normal 1170 wide content</div>
  <div> full browser width content</div>
</div>

所以容器类使整个 div 的宽度为 1170。我可以以某种方式使其中间更宽吗？ bootstrap 是否有针对这些东西的课程？一直在尝试浏览文档，但没有找到与此类案例相关的任何内容。

【问题讨论】：

如果您的容器始终为 1170px，那么您必须将整个浏览器 div 移出该容器，否则它不会延伸到更宽的任何地方
是的，我认为它可能是这样的。只是希望 Bootstrap 有一些偏移类或其他东西。我想我必须对模板进行更大的更改：/
您可以从容器中删除该 div，然后在下面的 1170px 中返回您需要的任何内容，只需创建另一个 <div class="container"> 但不确定这是否会破坏引导程序
是的，尝试一下。

标签： html twitter-bootstrap drupal drupal-themes

【解决方案1】：

正确的方法是从 .main-container 元素中删除 .container 类，并允许它是全宽的，然后第二步是用 .container 或.container-fluid.

请注意，这很可能需要调整主题的其余部分以遵循相同的结构。

 <div class="main-container">
      <div class="container">
         <div>normal 1170 wide content</div>
      </div>
      <div class="container-fluid">
         <div> full browser width content</div>
      </div>
 </div>

【讨论】：