1

我正在使用 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>

所以我只是不确定如何在任何页面模板中通过它

4

2 回答 2

3

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

原因 Bootstrap 使用box-sizing:border-box 模型，每个 html 元素默认获得其父元素的 100% 宽度。因此，将您的 .container div 包装在其他元素（div、标题等）中。这个包装器是 body 的直接子级，并获得 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-11T23:04:59.503 回答
0

谢谢，我昨天也向我提供了一些解决方案，以防其他人看到这个。

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

原始 base.php 的第 16 和 17 行

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

在 app.less

.home .main {
   padding: 0;
}

然后像这样添加你的部分：

<section class="semantic-section-class">  
   <div class="container">
      <!-- your content -->
   </div>
</section>
于 2013-10-12T06:52:21.693 回答