html - 带有 CustomizR 主题的全宽 DIV

Question

我目前正在使用 Customizr 主题，页面的默认设置设置为“全宽/无侧边栏”。

但是，当我尝试在一个页面中做这样的事情时:

<div id="blue-background">
<h1 style="text-align: center;">Full width text with background color ? >/h1>
</div>

对应的CSS代码:

#blue-background{
  width: 100%;
  float: left;
  padding: 20px;
  background: #2680BE;
  position: relative;
}

我的文本周围仍然有白边。增加宽度似乎不是一个好的解决方案，那我该怎么办？

这是我使用此代码得到的示例: http://www.cirnu.com/bandeau/

Answer 1

你的主包装器应该是这样的

<div id="main-wrapper">
    <div class="tc-hot-crumble container" role="navigation"><div class="row"><div class="span12"><div class="breadcrumb-trail breadcrumbs" itemprop="breadcrumb"><span class="trail-begin"><a href="http://www.cirnu.com" title="Cirnu" rel="home" class="trail-begin">Accueil</a></span> <span class="sep">»</span> <span class="trail-end">Bandeau</span></div></div></div></div>
    <div role="main">
        <div class="row column-content-wrapper">
            <div id="content" class="span12 article-container">
                <article id="page-623" class="post-623 page type-page status-publish hentry row-fluid">
                    <header class="entry-header">
                        <h1 class="entry-title format-icon">Bandeau</h1>
                        <hr class="featurette-divider __before_content">
                    </header>
                    <div class="entry-content">
                        <div role="main">
                            <div id="blue-background">
                                <div class="container">
                                    <h1 style="text-align: center;">Full width text with background color ?</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div><!--.article-container -->
        </div><!--.row -->
    </div><!-- .container role: main -->
</div>

然后您需要更改一些 CSS 规则:

#blue-background {
    padding:20px 0;
    /* then all the other rules you already have */
}

.article-container {

    width:100%;
}