последнее сообщение bootstrap grid wordpress

Я редактирую страницу index.php моей темы wordpress. Я хочу создать сетку изображений с бутстрапом, подобным этому https://i.stack.imgur.com/2gqnZ.jpg последнее сообщение bootstrap grid wordpress

- часы, которые я чувствую во всех отношениях, но я не могу! проблема в том, что я должен вызвать первую статью в col-md-8 вторую и третью в col-md-4 и последнее ниже в col-md-12. php Я вспоминаю только первые три, а не четвертые. это мой php-код. кто-то может мне помочь? спасибо

<div class="container-fluid no-gutter"> 
<div class="row"> 
<div id="primary" class="content-area col-md-12 no-gutter"> 
<main id="main" class="site-main" role="main"> 
<div class="col-md-8 no-gutter"> 
<?php if (have_posts()) : ?> 
    <?php while (have_posts()) : the_post(); ?> 
    <div class="post" id="post-<?php the_ID(); ?>"> 
     <?php if (has_post_thumbnail()) : ?> 
     <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> 
        <img class="img-responsive post-thumbnail" src="<?php the_post_thumbnail_url(); ?>"/> 
       </a> 
      <?php endif; ?> 
     </div> 
    </div> 
<div class="col-md-4 no-gutter"> 
<?php endwhile; ?> 
</div> 
</main>   
</div> 
</div> 
<div class="navigation"> 
<div class="alignleft"><p><?php next_posts_link('< Previous Entries') ?></p></div> 
<div class="alignright"><p><?php previous_posts_link('Next Entries >') ?></p></div> 
</div> 
<?php else : ?> 
      <h2 class="center">Not Found</h2> 
      <p class="center">Sorry, but you are looking for something that isn't here.</p> 
      <?php get_search_form() ?> 
     <?php endif; ?>

источник

2016-11-14 Nicola

Вы можете получить макет сетки с использованием начальной загрузки
Пример ниже

<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body>  
<div class="container-fluid"> 
    <h1>Hello World!</h1> 
    <p>Resize the browser window to see the effect.</p> 
    <div class="row"> 
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> 
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div> 
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> 
    </div> 
</div>  
</body>

Не забудьте включить необходимые JS и CSS

источник

2016-11-15 05:56:46

последнее сообщение bootstrap grid wordpress

ответ

Смежные вопросы