CSS Bootstrap 3 响应式桌面和移动布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18020942/
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
Bootstrap 3 responsive desktop and mobile layout
提问by Mohamed Nagy
Using bootstrap 3 to design my responsive website, I'm having trouble getting the layout to work below a desktop width resolution of 1366px v 786px. When the layout is decreased down to 1024px, it is considered the mobile breakpoint.
使用 bootstrap 3 设计我的响应式网站时，我无法让布局在 1366px v 786px 的桌面宽度分辨率下工作。当布局减小到 1024px 时，它被认为是移动断点。
How can I control when the layout switched from desktop to mobile layout?
如何控制布局何时从桌面切换到移动布局？
this is my html
这是我的 html
<body>
<div class="container-fluid">
<div class="container-fluid header">
<div id="container">
</div>
</div>
<div class="row-fluid">
<div class="col-lg-3">
<div class="well">
</div>
</div>
<div class="col-lg-9">
<div class="col-lg-6">
<div class="title">
<h3>title 1</h3>
</div>
</div>
<div class="col-lg-6">
<div class="title">
<h3>title 2</h3>
</div>
</div>
</div>
</div>
</div>
回答by Zim
The row-fluidand container-fluidare deprecated from BS 3, so now you just use containerand row
将row-fluid与container-fluid从BS 3弃用，因此现在你只需要使用container和row
You can use the new "small" grid classes (col-sm-*) to prevent the layout from stacking on smaller display..
您可以使用新的“小”网格类 ( col-sm-*) 来防止布局在较小的显示器上堆叠。
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-3">
<div class="well">
</div>
</div>
<div class="col-lg-9 col-sm-9">
<div class="col-lg-6 col-sm-6">
<div class="well">
</div>
</div>
<div class="col-lg-6 col-sm-6">
<div class="well">
</div>
</div>
</div>
</div>
</div>
Demo: http://bootply.com/71450
If you want it to never stack, even on the smallest displays, use the tiny col-xs-*grid classes.
如果您希望它永远不会堆叠，即使在最小的显示器上，也可以使用小col-xs-*网格类。
回答by beercodebeer
Looking through their documentation regarding the grid system (http://getbootstrap.com/css/), it would seem they have break points at <768, 768-992, 992-1200 and >1200 pixels, so you're now falling into the 'medium devices' category.
查看他们关于网格系统的文档（http://getbootstrap.com/css/），看起来他们在 <768、768-992、992-1200 和 >1200 像素处有断点，所以你现在正在下降进入“中型设备”类别。
You could modify the bootstrap.css file to change the break points for your particular case.
您可以修改 bootstrap.css 文件以更改特定情况的断点。
@media (min-width: 992px) {
on lines 1002 and 4595.
在 1002 和 4595 行。
回答by BrOSs
In you main.css (or whatever name you placed), do something like code below:
在您的 main.css（或您放置的任何名称）中，执行以下代码：
@media(max-width:1024px) {
body {
padding-right: 0 !important;
padding-left: 0 !important;
}
#heading > .container {
padding: 0 15px;
}
#main-content > .container {
padding: 0 15px;
}
#footer > .container {
padding: 0 15px;
}
#heading h1 {
font-size: 50px;
line-height: 55px;
}
#heading h4 {
font-size: 20px;
line-height: 25px;
}
}
