全宽色部分但不是全宽页面内容

我想实现这个http://roots.io/使用引导程序，但roots.io WordPress模板下 - 那里有颜色的部分，但页面内容本身不是全宽。

我给出的答案是使容器类100％ - 但这只是使所有的内容全宽。

我真的陷入困境，我一直试图找出几个小时。 - 我知道这听起来不太好用，但我无法逾越这一点。

所有的页面模板采取从base.php自己的风格，代码在这里

<?php get_template_part('templates/head'); ?> 
<body <?php body_class(); ?>> 

    <!--[if lt IE 8]><div class="alert alert-warning"><?php _e('You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.', 'roots'); ?></div><![endif]--> 

    <?php 
    do_action('get_header'); 
    // Use Bootstrap's navbar if enabled in config.php 
    if (current_theme_supports('bootstrap-top-navbar')) { 
     get_template_part('templates/header-top-navbar'); 
    } else { 
     get_template_part('templates/header'); 
    } 
    ?> 

    <div class="wrap container" role="document"> 
    <div class="content row"> 
     <div class="main <?php echo roots_main_class(); ?>" role="main"> 
     <?php include roots_template_path(); ?> 
     </div><!-- /.main --> 
     <?php if (roots_display_sidebar()) : ?> 
     <aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary"> 
      <?php include roots_sidebar_path(); ?> 
     </aside><!-- /.sidebar --> 
     <?php endif; ?> 
    </div><!-- /.content --> 
    </div><!-- /.wrap --> 

    <?php get_template_part('templates/footer'); ?> 

</body> 
</html>

所以我只是不知道如何让过去它在任何页面模板

来源

2013-10-11 Andi Wilkinson

关于第一部分你的问题：“100％宽度的彩色部分”。

原因Bootstrap使用box-sizing: border-box model默认情况下，每个html元素都获得其父项的100％宽度。所以把你的.container div包装在其他元素（div，header等）中。这个包装是一个直接的身体的孩子，并获得100％的宽度。请参阅：http://bootply.com/87196

<header role="banner" class="banner"> 
    <div class="container" style="background-color:red;"> 
    Header example 
    </div> 
</header> 

<div style="background-color:blue;">Elements get 100% width by default</div>

第二部分是关于你的页面模板。您显示的代码使用get_template_part()。这个功能是WordPress的核心功能。见http://codex.wordpress.org/Function_Reference/get_template_part#Using_loop.php_in_child_themes。你会发现你的模板应该放在哪里。但我认为首先阅读http://roots.io/roots-101/#theme-templates。

来源

2013-10-11 23:04:59

谢谢，昨天我还提供了几个解决方案，以防其他人看着这个。

我自己的只是从base.php文件中删除.container类。 - 这只是在默认情况下停止了每个页面的内容被限制在容器中。 - 通过这种方式，我能够以完整浏览器宽度向网页添加节，并在其中添加.container以约束实际内容。

线16和原base.php

<div class="wrap <?php if (! is_front_page()): ?>container<?php endif; ?>" role="document"> 
    <div class="content <?php if (! is_front_page()): ?>row<?php endif; ?>">

17在app.less

.home .main { 
    padding: 0; 
}

添加您的部分，像这样：

<section class="semantic-section-class"> 
    <div class="container"> 
     <!-- your content --> 
    </div> 
</section>

来源

2013-10-12 06:52:21

全宽色部分但不是全宽页面内容

回答

相关问题