我正在使用Bootstrap，但在 roots.io 的wordpress模板下使用"无包装主题">
我正在尝试实现此 http://roots.io/- 其中有颜色部分，但页面内容本身不是全宽。
我得到的答案是使容器类 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>
所以我只是不确定如何在任何页面模板中通过它
关于您问题的第一部分："100% 宽度彩色部分"。
导致引导程序使用框大小：边框框模型 默认情况下，每个 html 元素的父元素都获得其父元素的 100% 宽度。因此，将您的 .containerdiv 包装在其他元素(div、标头等(中。此包装器是正文的直接子项，宽度为 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。
谢谢，昨天我也提供了一些解决方案，以防其他人看到这个。
我自己的只是从 base.php 文件中删除 .container 类。 - 这只是默认停止了每个页面的内容被限制在容器中。 - 通过这种方式，我能够以完整的浏览器宽度向页面添加部分，并在其中添加 .container 以限制实际内容。
原始基地的第 16 行和第 17 行.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; ?>">
在应用程序中
.home .main {
padding: 0;
}
然后添加您的部分，如下所示：
<section class="semantic-section-class">
<div class="container">
<!-- your content -->
</div>
</section>