Цветные разделы полной ширины, но не содержимое страницы полной ширины

Я использую Bootstrap, но под шаблоном wordpress root.io, используя «тему без оболочки».

я пытаюсь добиться этого 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>

так что я просто не уверен, как обойти это в любом из шаблонов страниц


php wordpress-theming twitter-bootstrap-3
person Andi Wilkinson    schedule 11.10.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

О первой части вашего вопроса: «цветные детали 100% ширины».

Причина, по которой Bootstrap использует box-sizing: border- блочная модель каждый html-элемент по умолчанию получает 100% ширины своего родителя. Так что оберните свой .container div в другой элемент (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< /а> первый.

person Bass Jobsen    schedule 11.10.2013

arrow_upward
0
arrow_downward

Спасибо, вчера мне также предложили несколько решений, на случай, если кто-нибудь еще посмотрит на это.

мой собственный заключался в том, чтобы просто удалить класс .container из файла base.php. - это просто остановило содержимое каждой страницы, ограниченное контейнером по умолчанию. - таким образом я смог добавить разделы на страницу во всю ширину браузера и добавить .container внутри них, чтобы ограничить фактический контент.

строки 16 и 17 оригинального 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; ?>">

Без приложения

.home .main {
   padding: 0;
}

Затем добавьте свои разделы следующим образом:

<section class="semantic-section-class">  
   <div class="container">
      <!-- your content -->
   </div>
</section>
person Andi Wilkinson    schedule 12.10.2013