Html 使引导列无响应，并向其添加水平指示器栏

我已经做了很多有响应性的网页设计，我不记得如何让一个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' );
?>

像这样断开手机

取而代之的是要长并且有一个滚动条。
像这样

要获得侧面滚动，您可以设置
overflow-y:auto
，这样，如果容器内的内容比容器宽，您将获得所需的侧面滚动


#容器{
边框：1px纯红；
宽度：350px；
溢出y：自动；
}
#内在的{
宽度：620px；
}
文章{
显示：内联块；
背景色：#ccc；
宽度：200px；
高度：200px；
}

“霍林托拉史酷巴”？请把梨改成两个