使bootstrap无响应不使用col-xs

Question

我想让网站无响应，但是使用col-md，col-lg和col-sm，它必须是无响应的并忽略@viewport（浏览器调整大小）宽度，但必须对移动设备做出响应和平板电脑。

我需要使用col-md，sm，lg来使其在移动设备和平板电脑上响应，但我的网站因浏览器@viewport而崩溃，因为我无法对所有列使用col-x。

可以解决这个问题吗？

由于

Answer 1

做这样的事，

<script type="text/javascript">
$( document ).ready(function() {
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
         $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'your stylesheet url') );
    }
});

</script>

您必须加载jQuery。在头标记。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Answer 2

试试这个： -

@media screen and (min-width:768px){ /* or whatever width you prefer for min-width of desktop view */
.container{
    min-width:970px; /* or whatever width you prefer for desktop view */
    width:970px; /* or whatever width you prefer for desktop view */
    }
}

它应该做的是，在屏幕宽度为768px之前，它不会调整容器的大小。您可以根据需要更改此介质屏幕最小宽度。一旦设备或浏览器减少超过768px，它将自动启动响应。 CSS上面只是一个例子。您不需要任何JavaScript来处理您的情况。

希望它有所帮助。

Answer 3

我会根据它是否是触控设备加载或不加载响应式样式。移动设备的样式应该只是响应式css的网站。然后将其副本用于非触摸设备，但将列从最小宽度中移出并在容器上设置宽度。还有其他方法可以做到这一点，例如加载另一个css文件（如果它触摸并只保留所有设备的桌面样式），但响应的css在桌面之后加载，这样它就是最后一个订单。

MINI DEMO：http://jsbin.com/wuqita/1/edit

/* __________________ SUPPORTS TOUCH OR NOT  __________________*/
/*! Detects touch support and adds appropriate classes to html and returns a JS object  |  Copyright (c) 2013 Izilla Partners Pty Ltd  | http://www.izilla.com.au / Licensed under the MIT license  |  https://coderwall.com/p/egbgdw */
var supports = (function() {
    var d = document.documentElement,
        c = "ontouchstart" in window || navigator.msMaxTouchPoints;
    if (c) {
        d.className += " touch";
        return {
            touch: true
        };
    } else {
        d.className += " no-touch";
        return {
            touch: false
        };
    }
})();


$(document).ready(function () {
    if ($('html').hasClass('touch')) { 
      $('#desktopcss').prop('disabled',true);
    }
      if ($('html').hasClass('no-touch')) { 
      $('#responsivecss').prop('disabled',true);
    }

}); 

CSS文件链接和ids：

<link id="responsivecss" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<link id="desktopcss" href="//bombdiggitydesign.com/jsbin/test.css" rel="stylesheet" type="text/css" />