Как сделать строительные леса, если я хочу показывать сетки рядом друг с другом. Мои фактические коды
<div class="span8"> <div class="row-fluid"> <?php foreach($items as $item) : ?> <div class="span6"> <?= $item ?> </div> <?php endforeach; ?> </div> </div>
сетки показывают как
------------------- 1box 2box ------------------- 3box ------------------- 4box ------------------- 5box -------------------
Я бы хотел показать
------------------- 1box 2box ------------------- 3box 4box ------------------- 5box -------------------
<div class="span8 mutli-column"> <?php $c = 0; foreach( $items as $item ): //Needs Break Boolean, true if counter at second column $b = (( ++$c % 2 == 0 ) ? true : false ); if ( $b ) echo '<div class="row-fluid">'; ?> <div class="span6"> <?php echo $item; ?> </div> <?php if ( $b ) echo '</div>'; endforeach; ?> </div>
Используя% Modulus, вы можете рассчитать каждую вторую итерацию, таким образом, .row-fluid
в новую .row-fluid
, чтобы попасть в структуру HTML, как .row-fluid
ниже:
<div class="span8 mutli-column"> <div class="row-fluid"> <div class="span6">1</div> <div class="span6">2</div> </div> <div class="row-fluid"> <div class="span6">3</div> <div class="span6">4</div> </div> <div class="row-fluid"> <div class="span6">5</div> <div class="span6">6</div> </div> <div class="row-fluid"> <div class="span6">7</div> <div class="span6">8</div> </div> </div>
Вот скрипка, построенная с вышесказанным:
Возможно, это не лучшее решение, но может помочь вам решить вашу проблему. Примечание. Я не тестировал этот код. Итак, взгляните на идею.
<div class="span12"> <?php $i = 0; foreach($items as $item) : if ($i == 0) echo '<div class="row-fluid">'; ?> <div class="span6"> <?= $item ?> <?php if ($i == 1) echo '</div>'; $i = 1 - $i; ?> <?php endforeach; ?> <?php if ($i == 0) echo '</div>'; ?> </div>
Bootstrap 2:
<div class="row-fluid"> <?php foreach ($items as $i => $item) : ?> <?php if ($i && $i % 2 == 0) : ?> </div><!-- /.row-fluid --> <div class="row-fluid"> <?php endif; ?> <div class="span6"> <?php echo $item; ?> </div> <?php endforeach; ?> </div><!-- /.row-fluid -->
Bootstrap 3:
<div class="row"> <?php foreach ($items as $i => $item) : ?> <?php if ($i && $i % 2 == 0) : ?> </div><!-- /.row --> <div class="row"> <?php endif; ?> <div class="col-sm-6"> <?php echo $item; ?> </div> <?php endforeach; ?> </div><!-- /.row -->
используйте этот код:
.row-fluid [class*="span"]:nth-child(3n+1) { margin-left: 0; }
Обновлено: мое собственное очень простое, но работающее решение для зацикливания сообщений в двух столбцах (например, в бутстрапе) – сообщения из определенного идентификатора категории
/ извините за мой бедный английский 🙂 /
<div class="row-fluid"> <?php $divCounter = 0; $postCounter = 1; $temp = $wp_query; $wp_query = null; $wp_query = new WP_Query(); $wp_query->query('showposts=10&cat=2'.'&paged='.$paged); if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post(); ?> <!-- starting the loop --> <div class="span6"> <p><?php the_title(); ?></p> <div class="row-fluid"> <div class="span5"> <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?> <p><img src="<?php echo $url; ?>" /></p> </div> <div class="span7"> <?php the_excerpt(); ?> <p><a class="btn" href="<?php the_permalink(); ?>">more »</a></p> </div> </div> </div> <?php $allposts = $wp_query->post_count; //counting all posts in category $divCounter++; //divCounter states is: 1 or 2 if ($divCounter == 2 && $postCounter < $allposts) { // if we are on the second Span and our postCounter is smaller then allposts then we close the second Span and open a new Row // so we close the second Span and open a new Row only when we have min. one post left and when we are on the second Span - else we write the last closing tag: </div> <!-- the last row --> echo '</div><div class="row-fluid">'; $divCounter = 0; //reseting divCounter } if ($postCounter == $allposts) { //when the postCounter reach allposts then we closing the row - for example if you have only 1 post in category or in page2 (pagenation) echo '</div> <!-- the last row -->'; } $postCounter++; ?> <!-- loop end --> <?php endwhile; ?>
Попробовав много разных ответов, мне удалось выполнить динамическое создание разделов bootstrap class="row" and class="col-md-6" divs
. Здесь я использовал php, но это может быть достигнуто с помощью любого другого языка сценариев на стороне сервера.
<div class="container"> <div class="row-fluid"> <?php $c = 0; foreach( $items as $item ): $c++; // Closing PHP tag follows ?> <div class="col-md-6"> <?php echo $item; ?> </div> <?php if($c % 2 == 0) echo '</div><div class="row-fluid">'; endforeach; ?> </div>
В результате создается следующий код HTML:
<div class="span8 mutli-column"> <div class="row-fluid"> <div class="col-md-6">1</div> <div class="col-md-6">2</div> </div> <div class="row-fluid"> <div class="col-md-6">3</div> <div class="col-md-6">4</div> </div> .... </div>