【问题标题】:How to disable the responsive temporary如何禁用响应式临时
【发布时间】:2019-08-29 11:13:15
【问题描述】:

如何禁用引导的响应/网格?

我正在为公司构建网站,并且我已经使网站能够响应移动设备。然而,他们告诉我他们想为移动设备制作另一个设计,但桌面版将首先发布。他们希望在用户使用移动设备时保留桌面设计或将浏览器制作为移动设备大小,就像传统网站一样,用户应该左右滚动才能查看网站。

我尝试在包装器/主体上添加min-width,它只是扩展宽度,但使用引导网格的元素仍然响应。我可以使用简单的 css 技巧来解决这个问题吗?

示例如下: https://jsfiddle.net/j17qtLfv/

我想保持 2 或 3 col 一排,即使是小尺寸。

谁能帮帮我?

【问题讨论】:

    标签: html css bootstrap-4


    【解决方案1】:

    好吧,删除那些表明它应该在小屏幕上采用不同列布局的类名。

    .row {
      background: #f8f9fa;
      margin-top: 20px;
    }
    
    .col {
      border: solid 1px #6c757d;
      padding: 10px;
    }
    
    #block{
      background:red;
      min-width:1000px;
    }
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <!-- 
      Bootstrap docs: https://getbootstrap.com/docs
    -->
    <div id="block">
    
    <div class="container">
      <div class="row">
        <div class="col-6">
          1 of 2
        </div>
        <div class="col-6">
          2 of 2
        </div>
      </div>
      <div class="row">
        <div class="col-4">
          1 of 3
        </div>
        <div class="col-4">
          2 of 3
        </div>
        <div class="col-4">
          3 of 3
        </div>
      </div>  
    </div>
    </div>

    【讨论】:

      【解决方案2】:

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2010-09-10
        • 1970-01-01
        • 2018-02-10
        • 2015-10-07
        • 2019-01-14
        • 2012-10-25
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多