調整Bootstrap「行」以適應各種列「col-xs-12 col-sm-4 col-md-3」？

使用WP循環在頁面上插入帖子。例如，嘗試使用Bootstrap列類「col-md-3」來實現網格佈局。我能夠找到有用的代碼，但它缺少一部分，我試圖實現。基本上，當您使用WP循環來拉動並顯示頁面上的帖子時，您可以爲每個帖子放置Bootstrap列類「col-md-43」。這樣，每個帖子都在一列中，並且基本上創建了一個帖子網格。看起來不錯，除了每一行都有不同的高度，然後你有奇怪的間距/間隙。調整Bootstrap「行」以適應各種列「col-xs-12 col-sm-4 col-md-3」？

好吧，有很多解決方案，我喜歡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(); 

?>

來源

2017-08-02 Treb

一個好辦法來解決，這是給分的高度，以您的列。這可能需要爲每個大小即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; 
}

然後，您可以爲其餘屏幕提供不同的最小高度的媒體查詢。

來源

2017-08-02 05:09:48 shazyriver

使用下面的css屬性來解決問題。

height: 100px; 
overflow:auto;

通過這種方式所有的箱子都會有同樣的高度，如果內容更多的則是在給定的高度會自動添加一個滾動並調整它自己的內容。

來源

2017-08-02 08:16:53

調整Bootstrap「行」以適應各種列「col-xs-12 col-sm-4 col-md-3」？

回答

相關問題