html - Bootstrap 防止小于 800px 的流动性

Question

所以，我有一个 Bootstrap 网站，我希望在一定的屏幕尺寸后，用户被迫滚动浏览器。

例如，如果我有以下内容:

<div class="container">
   <div class="row>
      <div class="col-md-3 col-sm-6 col-xs-6"></div>
      <div class="col-md-3 col-sm-6 col-xs-6"></div>
      <div class="col-md-3 col-sm-6 col-xs-6"></div>
   </div>
</div>

我希望在将窗口调整到 800px 以下后，那些带有 col-xs-6 的 div 保持与 col-md-6 相同的宽度。因此，用户将被迫滚动窗口。

我尝试使用:

• min-width 在容器上(不工作，容器内的 col-md`s 仍然从窗口百分比中获取值)
• 修改 bootstrap.css，使 col-xs-6 恰好是 800px 的 50%。

以上都不行。关于如何做到这一点有什么建议吗？

Answer 1

<style>
@media screen and (max-width:800){
   .col-sm-6, .col-xs-6{
        Min-width:50%;
     }
 }
</style>
<div class="container">
   <div class="row>
      <div class="col-md-3 col-sm-6 col-xs-6"></div>
      <div class="col-md-3 col-sm-6 col-xs-6"></div>
      <div class="col-md-3 col-sm-6 col-xs-6"></div>
    </div>
 </div>