html - 如何使用 Bootstrap 使矩形居中并响应？

Question

我正在尝试为网络制作棋盘游戏。我想使用 Bootstrap 使元素响应。

游戏的主要元素是一个矩形(游戏板)。这应在所有显示尺寸中居中显示，并在所有边上留有一点边距。

我必须应用哪些属性和 CSS 规则？我应该使用普通容器还是容器液体？

在容器/行中创建一列并为其指定一类“col-xs-12”是否足够？

据我所知，这适用于从最小到最大的所有设备。

到目前为止我尝试了什么:

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>

Answer 1

在这里你可以看到一个例子:你不需要 col-xs-12 。您只需在父级中设置 contaier-fluid 并在 div 包装器中使用 box-sizing:border-box 设置一些填充。 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>