覆盖引导程序容器宽度 [英] override bootstrap container width

问题描述

我有一个使用引导程序的简单HTML模板3.模板具有以下结构：静态页眉，静态页脚和引导程序类Container中的内容。在内容的中间，我有bootstrap'w好，我希望它看起来像页眉和页脚。我的意思是我希望它成为任何屏幕上屏幕的整个宽度。

我创建了简单的

这个想法是，你需要一个负值 margin-left 和 margin-right 以便 .well 跨越屏幕。

I have an easy HTML template using bootstrap 3. Template has following structure: static header, static footer and content which is in the bootstrap's class "Container". In the middle of content I have bootstrap'w "Well" and i want it make looks like header and footer. I mean I want it to be the full width of the screen on any screen.

I created easy fiddle.

Here's a question, is there any way to override container's width inside this container?

<header>
   <div class="container">
      <div class="content">

      </div>
      <div class="well">

      </div>
      <div class="content">

      </div>
   </div>
<footer>

解决方案

ORIGINAL + BEST PRACTICE: always move the .well outside of .container to stay idiomatic with Bootstrap

UPDATE + IF ABOVE IS NOT AN OPTION: Given that you cannot easily modify .container styles and/or move the .well outside of .container, your best bet is JavaScript. Here I have made a script that makes .well expand as the width of the window changes.

http://jsfiddle.net/iamnotsam/E3RQp/1/

The idea is that you want a negative value for margin-left and margin-right so that .well expands across the screen.

这篇关于覆盖引导程序容器宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！