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-element がその親の 100% の幅を取得します。したがって、.container div を他の要素 (div、header など) でラップします。このラッパーは 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>

ページ テンプレートに関する 2 番目の部分。あなたが示すコードは、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 に答える