twitter-bootstrap 如何使用 Bootstrap 使矩形居中并响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36349557/
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
How to make a rectangle centered AND responsive with Bootstrap?
提问by ts248
I'm trying to make a board-game adoption for web. I want to use Bootstrap to make the elements responsive.
我正在尝试为网络采用棋盘游戏。我想使用 Bootstrap 使元素具有响应性。
The main element of the game is a rectangle (the game board). This shall appear centered in all display-sizes and with a bit of margin to all sides.
游戏的主要元素是一个矩形（游戏板）。这将出现在所有显示尺寸的中心，并在所有边上留有一点边距。
Which attributes and CSS-rules do I have to apply? Shall I use a normal container or container-fluid?
我必须应用哪些属性和 CSS 规则？我应该使用普通容器还是容器流体？
Would it be enough to make one column within the container / row and give it a class of "col-xs-12"?
在容器/行中创建一列并给它一个“col-xs-12”类就足够了吗？
As far as I know this would be applied to all devices beginning from the smallest to the largest upwards.
据我所知，这将适用于从最小到最大向上的所有设备。
What I have tried so far:
到目前为止我尝试过的：
html, body {
height: 100%;
}
.container {
margin: 10px auto;
height: 100%;
display: flex;
justify-content: center;
background-color: #ababab;
}
.row {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.board {
margin: 10px;
height: 400px;
width: calc(100% - 40px);
background-color: teal;
border: 1px solid black;
font-size: 2.5em;
font-weight: bold;
color: white;
text-align: center;
line-height: 400px;
}<div class="container">
<div class="row">
<div class="col-xs-12 board">The game-board</div>
</div>
</div>回答by Spyros Xenikakis
Here you can see an example : you dont need col-xs-12 . You have only to set contaier-fluid in the parent and some padding in div wrapper with box-sizing:border-box . Row is for reset the standard padding of container and col classes with negative margin. It's your decision if you want to .
在这里你可以看到一个例子：你不需要 col-xs-12 。您只需在父项中设置容器流体，并使用 box-sizing:border-box 在 div 包装器中设置一些填充。Row 用于重置具有负边距的容器和 col 类的标准填充。如果你愿意，这是你的决定。
html,body{height:100%;margin:0;padding:0;}
.container-fluid,.row{height:100%;background-color:grey}
.board-container{padding:40px;box-sizing:border-box}
.board{background-color:teal;height:100%;padding:40px;}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row board-container">
<div class="board">Board Game</div>
</div>
</div>回答by Zubair sadiq
html, body {
height: 100%;
}
.container {
margin: 10px auto;
height: 100%;
display: flex;
justify-content: center;
background-color: #ababab;
}
.row {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.board {
margin: 10px;
height: calc(100% - 40px);;
width: calc(100% - 40px);
background-color: teal;
border: 1px solid black;
font-size: 2.5em;
font-weight: bold;
color: white;
text-align: center;
}<div class="container">
<div class="row">
<div class="col-xs-12 board">The game-board</div>
</div>
</div>回答by Ram_UI
html,body{
height:100%;
background:#FF3366;
}
.container {
width:100%;
height:100%;
}
.row{
height:100%;
margin:30px 30px 30px 30px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: teal;
border: 1px solid black;
font-size: 2.5em;
font-weight: bold;
color: white;
}<div class="container">
<div class="row">
<div class="col-xs-12">The game-board</div>
</div>
</div>Try this one.
试试这个。
