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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:58:00  来源:igfitidea点击:

Restrict body (min-width) width in Bootstrap 3

csstwitter-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:

也许你可以做这样的事情:

http://bootply.com/92061

http://bootply.com/92061

回答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 并且仍然违背大屏幕的响应能力。

  1. Compile bootstrap with

    @screen-xs: 0px;
    @screen-sm: 1px;
    
  2. Add this to your css file

    body {
        min-width: 600px;
    }
    
  1. 编译引导程序

    @screen-xs: 0px;
    @screen-sm: 1px;
    
  2. 将此添加到您的 css 文件中

    body {
        min-width: 600px;
    }