CSS 在 Bootstrap 3 中限制主体(最小宽度)宽度
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19799321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Restrict body (min-width) width in Bootstrap 3
提问by Brian Genisio
I don't want my app resizing and responding to sizes lower than a given width... say 600px.
我不希望我的应用程序调整大小并响应小于给定宽度的大小......比如 600px。
I can't just do body { min-width: 600px }
in Bootstrap because of media queries.
body { min-width: 600px }
由于媒体查询,我不能只在 Bootstrap 中进行。
What can I do instead?
我可以做什么?
回答by ravb79
You could always adjust the media queries.
您可以随时调整媒体查询。
Try this:
尝试这个:
<head>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<style>
@media (max-width: 600px) {
body {background:#c00;min-width:600px;}
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
And then reset/edit/override all the other elements inside this media query.
然后重置/编辑/覆盖此媒体查询中的所有其他元素。
回答by Zim
Did you see the disabling responsiveness section in the BS docs: http://getbootstrap.com/getting-started/#disable-responsive
您是否在 BS 文档中看到禁用响应部分:http: //getbootstrap.com/getting-started/#disable-responsive
Maybe you can do something like this:
也许你可以做这样的事情:
回答by Steven
Try recompiling bootstrap with different media query size. If you are not using less in your project, try using their customize page.
尝试使用不同的媒体查询大小重新编译引导程序。如果您在项目中没有使用 less,请尝试使用他们的自定义页面。
For example, if you want to set your body with min-width of 600px and still perverse the responsiveness of the larger screen.
例如,如果你想将你的 body 设置为 600px 的 min-width 并且仍然违背大屏幕的响应能力。
Compile bootstrap with
@screen-xs: 0px; @screen-sm: 1px;
Add this to your css file
body { min-width: 600px; }
编译引导程序
@screen-xs: 0px; @screen-sm: 1px;
将此添加到您的 css 文件中
body { min-width: 600px; }