Anzeigen von Wordpress-Posts in 2 Spalten mit Bootstrap

Question

Ich benutze Bootstrap, und ich möchte meine Wordpress-Posts in zwei Spalten auf meiner Index.php-Seite anzeigen. Ich zeige nur den Permalink meiner Posts, und ich möchte sie in horizontaler Reihenfolge haben. Wenn die Seite von xs Bildschirm geladen wird, würde ich gerne die Beiträge in einer Spalte übereinander haben. Ich habe viele verschiedene Dinge versucht, aber ich konnte keinen richtigen PHP-Code bekommen. Ich begann wieder von Grund auf, ist hier der Code ich jetzt haben:

<?php if (have_posts()): ?> 
 

 
<div class="container"> 
 
    <?php while(have_posts()): the_post(); ?> 
 

 
    <div class="row"> 
 
    <div id="post_title_overview_page"> 
 
     <div class="col-lg-12 col-md-12 col-xs-12"> 
 
     <a href="<?php the_permalink(); ?>"><?php $first = str_replace(' | ', '<br />', get_the_title()); echo str_replace('REPLACE_ME', '<i>REPLACE_ME</i>', $first);?></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <?php endwhile; ?> 
 
</div> 
 

 
<?php else: ?> 
 
<div class="row"> 
 
    <div class="col-xs-12"> 
 
    <p>no result</p> 
 
    </div> 
 
</div> 
 

 
<?php endif; ?>

Ich würde wirklich zu schätzen Ihre Hilfe! Danke vielmals!

Answer 1

Die Klasse, die Sie verwenden, ist nicht korrekt. Verwenden Sie die folgende

<div class="col-lg-6 col-md-6 col-xs-12"> 
     <a href="<?php the_permalink(); ?>"><?php $first = str_replace(' | ', '<br />', get_the_title()); echo str_replace('REPLACE_ME', '<i>REPLACE_ME</i>', $first);?></a> 
     </div> 

col-lg- * wird für größere Bildschirme verwendet

col-MD- * für mittlere Bildschirmen verwendet wird

col-xs- * für kleine Bildschirme verwendet wird

Da wollen Sie zwei div Seite an Seite auf großen Geräten so lg-6 verwendet wird und auf klein Sie wollen nur ein div so xs-12 ist