Question

这是一个棘手的问题。我使用bootstrap建立了一个网站，它的辉煌。非常适合手机/平板电脑。谈到问题所在的桌面问题。

当浏览器大小为例如。 1000px（身体的宽度）然后该网站看起来应该如何。当浏览器窗口调整大小并且更小时，一旦它通过平板电脑尺寸例如767px，则布局会发生变化，以使一切响应。

有没有办法让网站的布局完全相同，无论窗口大小如何，同时能够使用bootstraps网格系统？

Answer 1

您是否尝试过新的grid options？特别是.col-xs-*应该会帮助你。

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Answer 2

您可以使用媒体查询@media handheld，理论上，该查询仅供手持设备（手机和平板电脑）使用。

请参阅http://www.w3.org/TR/CSS2/media.html

如果这不起作用（因为手机不合作），您可以用max-device-width代替max-width，因为手机上的浏览器通常全屏显示。

当然，平板电脑的屏幕尺寸与桌面显示器相同，并且使用台式电脑等窗口浏览器，但对于那些电脑，您是否仍然希望以不同于桌面电脑的方式对待它们？

Answer 3

正如@ tim-bartsch所提到的，xs（超小）网格类col-xs-*在每个屏幕尺寸上都会起作用。这将在http://getbootstrap.com/getting-started/#disable-responsive更详细地描述。如果您的布局也使用Navbar，则上面的内容可能对您没有帮助。对此的指示似乎有点神秘：

如果使用导航栏，请删除所有导航栏折叠和展开行为。

在这种情况下，您还可以尝试：https://github.com/bassjobsen/non-responsive-tb3

bootstrap 3.0.0关闭响应，同时能够使用网格系统

3 个答案: