さまざまな列数「col-xs-12 col-sm-4 col-md-3」に合わせてブートストラップの「行」を調整しますか？

Question

WPループを使用してページに投稿を挿入する。たとえば、ブートストラップ列「col-md-3」を使ってグリッドレイアウトを達成しようとしています。 便利なコードが見つかりましたが、達成しようとしている部分に欠けています。 WPループを使用してページ上のポストをプルして表示するときは、ポストごとにブートストラップカラムクラス「col-md-43」を置くことができます。こうすることで、各投稿が列に表示され、基本的に投稿のグリッドが作成されます。それぞれの行が異なる高さを持っていることを除いて、奇妙な間隔/ギャップがあることを除いて、すばらしく見えます。

これで解決策がたくさんあり、私はZarko Jovicによって提案されたものが好きでした。 https://stackoverflow.com/a/35963572/2243165

基本的に解決策は、列を「行」クラスに入れることです。問題が解決しました。

これは、画面のサイズに基づいて異なる列がある場合は、どうやったらいいか分からないという点を除いて、これは機能します。たとえば、私は "col-xs-12 col-sm-4 col-md-3"を使用します。 3つの異なる列サイズ/クラスのそれぞれに対して調整する行を作成できるかどうかは分かりません。リンク内のコードは、4列の行を使用するように記述されています。しかし、「col-xs-12 col-sm-4 col-md-3」クラスを使用すると、行には時には1列、時には3列、他の時には4列の列があります。（

これまでのコードはありません。 。

<?php 
// Force loop to display defined custom post type 
$args2 = array(
    'post_type' => 'i', 
    'author' => get_queried_object_id(), 'showposts' => 100 
    ); 

$editors_pages = new WP_Query($args2); 

// The loop 
if ($editors_pages->have_posts()) : while ($editors_pages->have_posts()) : $editors_pages->the_post(); ?> 

<div class='col-xs-12 col-sm-4 col-md-3'> 
    <div class='author-pages-title'><h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4></div> 
</div> 

<?php endwhile; else : ?> 
    <p class='align-center'>Sorry, no pages posted yet by this user.</p> 
<?php endif; 
wp_reset_postdata(); 

?> 

Answer 1

「行」クラスを配置し、これを取り組むための良い方法は、あなたの列に分の高さを与えることです。これは、あなたが各サイズすなわちXS、MDのメディアクエリーが必要な場合があります。

// The loop 

<div class="row"> // put a div 
if ($editors_pages->have_posts()) : while ($editors_pages->have_posts()) : $editors_pages->the_post(); ?> 

<div class='special-min-height col-xs-12 col-sm-4 col-md-3'> // add a class to reference too. 
    <div class='author-pages-title'><h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4></div> 
</div> 

<?php endwhile; else : ?> 
    <p class='align-center'>Sorry, no pages posted yet by this user.</p> 
<?php endif; 

</div> 

CSS

.row .special-min-height { 
    min-height: 200px; 
} 

次に、minの高さが異なる残りの画面のメディアクエリを記述することができます。

Answer 2

この問題を解決するには、次のCSSプロパティを使用します。この方法による

height: 100px; 
overflow:auto; 

すべてのボックスは、同じ高さを持つことになりますし、コンテンツを所定の高さ、より多くを自動的にスクロールを追加し、その中にあなたのコンテンツを調整しますある場合。