使bootstrap列无响应并向其添加水平scool栏

Question

我已经完成了响应式网页设计，我不能简单地记住如何使div不再重复。

这是我的设计看起来像

当我把它带到移动设备时它调整大小，我不希望它调整大小我希望它有一个带有水平滚动条的长宽度。

这是我的代码示例。

<?php function acardio_big_grid_3() {
?>
<div class="row"><div class="clearfix eight-small-grid-contoler">
<div class="the-content-cat-bt" style="padding-bottom: 10px;">  <a class="tiptipBlog" title="Latest Post">Best Smartphone 2017</a> </div>


<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('post_type' => 'post', 'posts_per_page' => 8, 'paged' => $paged);
$query = new WP_Query($args);
if( $query->have_posts() ) :
while( $query->have_posts() ) : $query->the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>
<div class="all-eight-small-grid-thumbs">
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div> 

</div>
</li>

 <?php elseif ($count == 2) : ?> 
 <li class="the-big-list">
 <div class="eight-small-grid-thumbs">
 <div class="the-main-featured-image-responsive">
 <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div> 

</div>
</li>



<?php elseif ($count == 3) : ?> 
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div> 

</div>
</li>

<?php elseif ($count == 4) : ?> 
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div> 

</div>
</li>


<?php elseif ($count == 5) : ?> 
<li class="the-big-list">

<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div> 

</div>
</li>


<?php elseif ($count == 6) : ?> 
<li class="the-big-list">

<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div> 

</div>
</li>
</div>
</div>
</div>


<?php else : ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
<?php
}
add_shortcode( 'acardio-big-grid-3', 'acardio_big_grid_3' );
?>

请我该怎样做才能确保没有像这样在移动设备上中断

而不是很长，并有一个滚动条。 喜欢这个

Answer 1

要进行侧滚动，您可以设置overflow-y: auto，这样如果容器内的内容比容器宽，那么您将获得正在寻找的侧滚动。

#container {
  border: 1px solid red;
  width: 350px;
  overflow-y: auto;
}

#inner {
  width: 620px;
}

article {
  display: inline-block;
  background-color: #ccc;
  width: 200px;
  height: 200px;
}

<div id="container">
  <div id="inner">
    <article></article>
    <article></article>
    <article></article>
  </div>
</div>