Html 在引导程序中创建响应式 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29034358/
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
Creating responsive divs in bootstrap
提问by Ajay Kulkarni
I'm experimenting with bootstrap and this is the code which I wrote:
我正在尝试引导程序，这是我编写的代码：
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<style type="text/css">
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
text-align:left;
margin-right:-4px;
}
.pos{
position: relative;
top: 240px;
}
</style>
</head>
<body>
<div class="container">
<div class="row row-centered pos">
<div class="col-lg-8 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-centered">
<div class="well"></div>
</div>
</div>
</div>
</body>
</html>
The output is as shown in screen shot:
But when I convert to mobile screen, I get like this:
I want the divs to appear in center with one above one in mobile screens as well. How can I do it?
But it isn't responsive.
输出如屏幕截图所示：但是当我转换为移动屏幕时，我得到这样的结果：
我希望 div 出现在中心，并且在移动屏幕上也显示在 div 上。我该怎么做？但它没有响应。
回答by ZEE
you can use col-xs-12in your div's , add this to each div and it will work like you expect it
你可以col-xs-12在你的 div 中使用，将它添加到每个 div 中，它会像你期望的那样工作
<body>
<div class="container">
<div class="row row-centered pos">
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
</div>
</div>
</body>
More about bootstrap grid option
关于引导网格选项的更多信息
回答by maX
You can define multiple widths for screen sizes :
您可以为屏幕尺寸定义多个宽度：
col-lg: large screen
col-lg: 大屏幕
col-md: middle screen
col-md: 中屏
col-xs: small screen
col-xs: 小屏幕
In your example :
在你的例子中：
<div class="container">
<div class="row row-centered pos">
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
</div>
</div>
回答by Herman Nz
What you have done with it, for me, is not bad.
you just need to modify the CSS, as follows:
你用它所做的，对我来说，还不错。
你只需要修改CSS，如下：
.row-centered {
text-align:center;
margin:0 auto;
}
.col-centered {
display:block;
float:none;
}
.pos {
position: relative;
top: 240px;
}
When you would like to make it smaller, just reduce 8 to 7 or 6 and it's all done responsively. Using col-lg is true for large screen and it would not make it stuck using it for mobile performance.
当您想缩小它时，只需将 8 减少到 7 或 6，一切都会响应式完成。对于大屏幕使用 col-lg 是正确的，它不会让它卡在移动性能上。
