Question

我的引导程序2 div's在同一行。但当屏幕少991px它来了2排。如何使用CSS避免这种情况。

<div class="myclass">
    <div class="col-md-12 col-md-3" style="background-color: #1b6d85">1 assdasddasd</div>
    <div class="col-md-12 col-md-9" style="background-color: #66512c">2 asas</div>
</div>

Answer 1

更改班级名称

<?php
$current_page = (get_query_var('paged')) ? get_query_var('paged') : 1; // get current page number
$args = array(
'posts_per_page' => 5, // the value from Settings > Reading by default
'paged'          => $current_page // current page
);
query_posts( $args );

$wp_query->is_archive = true;
$wp_query->is_home = false;

while(have_posts()): the_post();
?>





            <article class="blog-box">
                <header>
                    <div class="row">
                        <div class="col-md-1 blog-date">
                            <span class="blog-day"><?php the_time('jS') ?> </span>
                            <span class="blog-month"><?php the_time('M') ?></span>
                        </div>
                        <div class="col-md-11">
                            <h2><?php the_title() /* post title */ ?></h2>
                        </div>
                    </div>
                </header>
               <?php the_post_thumbnail('blogImage', array( 'class' => "img-responsive")); ?>
                <?php my_excerpt(short);?>  
                <a href="<?php echo get_permalink(); ?>" class="more-btn">more</a>
            </article>
            <!-- // blog box  -->
<?php
endwhile;
if( function_exists('wp_pagenavi') ) wp_pagenavi(); // WP-PageNavi function
?>

Answer 2

试试这个

  <div class="container-fluid">
    <div class="row myclass">
        <div class="col-xs-3" style="background-color: #1b6d85">1 assdasddasd</div>
        <div class="col-xs-9" style="background-color: #66512c">2 asas</div>
    </div>
    </div>

Answer 3

<div class="row">
    <div class="col-md-3 col-sm-3 col-xs-3" style="background-color: #1b6d85">1 assdasddasd</div>
    <div class="col-md-9 col-sm-9 col-xs-9" style="background-color: #66512c">2 asas</div>
</div>

行用于换行到单行

Answer 4

试试这个

<div class="myclass">
        <div class="col-xs-6 col-sm-3 col-md-3" style="background-color: #1b6d85">1 assdasddasd</div>
        <div class="col-xs-6 col-sm-9 col-md-9" style="background-color: #66512c">2 asas</div>
    </div>

当屏幕少于991px时，DIV得到2行

4 个答案: