neueste post bootstrap grid wordpress

Ich bearbeite die index.php Seite meines Wordpress Theme. Ich möchte ein Bilderraster mit Bootstrap wie dieses https://i.stack.imgur.com/2gqnZ.jpg neueste post bootstrap grid wordpress

Stunden sind, die ich in jeder Hinsicht fühle, aber ich kann nicht! das problem ist, dass ich den ersten artikel in col-md-8 den zweiten und dritten im col-md-4 und den letzten unten in col-md-12 aufrufen soll. php Ich erinnere mich nur an die ersten drei und nicht an die vierte. Das ist mein PHP-Code. kann mir jemand helfen? danke

<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; ?>

Quelle

2016-11-14 Nicola

Sie Raster-Layout-Bootstrap
Beispiel für die Verwendung erhalten können, ist unter

<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>

erforderlich js und CSS nicht Vergessen Sie sind

Quelle

2016-11-15 05:56:46

neueste post bootstrap grid wordpress

Antwort

Verwandte Themen