停止twitter bootstrap css在特定屏幕宽度后的响应。< 1000px

Question

我正在使用bootstrap 2.3.2 css框架来设置web应用程序的界面。我正在使用框架的响应式版本。

应用程序不需要是移动+平板响应的，但我使用响应式版本，以便在更宽的显示器上水平缩放界面( UI的很大一部分是表格数据，因此拥有更大屏幕的用户将很高兴能够使用他们的屏幕的全宽度)。

有没有一种方法可以使用bootstrap的响应功能，但在某个确定点后停止它们的响应-即。在< 1000px时，界面将不再具有响应性(用户仍然可以将其放大，但不能缩小)

本质上，我想在<1000px之后停止构成网格缩放的span和offset元素

Answer 1

我已经修改了Bootstrap，不包括1000px以下设备的响应功能。

这个例子应该能证明这一点：http://floating-wildwood-8562.herokuapp.com/examples/grid.html

您可以使用这个修改过的响应式引导css文件here。

这需要对Bootstrap的LESS文件进行两次更改，并重新构建框架。Shown here和here

您也可以决定将此代码添加到css中：

html, body {
  min-width: 1000px;
} 

这样，窗口将被强制设置为至少1000px。

Answer 2

我没有用过bootstrap，但它必须有一个css，你应该看看你是如何调用你的主包装器的，并在它的末尾添加。

@media screen and (max-width: 1000px) {
    #main_wrap {
        width:1000px;
    }
}

我重新读了你的问题，这就是你必须看起来的，例如，你保持主包装100%的宽度，但有一些元素，如图像包装，文本包装，等等……所以..。在css (不是媒体查询)中查找所有它们，并放置一个最小宽度...示例

/* ------ NORMAL FORMATTING Examples */

#img_wrapper {
     min-width:300px;
}
#text_wrapper {
     min-width:400px;
}
#logo_wrapper {
     min-width:100px;
}

/* ------ Media Queries */
@media screen and (max-width: 1000px) {
        #main_wrap {
            width:100% /* ----> This keeps 100% for responsive */
        }
    }

为什么这个U不必查询它们，当它们达到最小尺寸时，它们将不再调整大小，它们将保持该大小。如果屏幕继续调整大小。我希望这对你有所帮助

如果您想查询它们，那么不要设置最小大小，只需给它们一个确切的宽度

@media screen and (max-width: 1000px) {
            #main_wrap {
                width:100% /* ----> This keeps 100% for responsive */
            }
                #img_wrapper {
                    width:300px;
                }
                #text_wrapper {
                   width:400px;
                }
                #logo_wrapper {
                   width:100px;
                  }
        }