Question

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

游戏的主要元素是一个矩形（游戏板）。这应该以所有显示尺寸为中心，并且对所有边都有一点余量。

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

是否足以在容器/行中创建一个列并为其提供一个＆＃34; col-xs-12＆＃34;？

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

到目前为止我尝试过：

＆＃13;

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;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-xs-12 board">The game-board</div>   
  </div>
</div>

＆＃13;

Answer 1

在这里你可以看到一个例子：你不需要col-xs-12。您只需在父级中设置容器流体，在div包装器中使用box-sizing：border-box设置一些填充。行用于重置容器的标准填充和具有负边距的col类。如果你愿意，这是你的决定。

＆＃13;

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;}

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-xs-12 board">The game-board</div>   
  </div>
</div>

＆＃13;

Answer 3

  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>

试试这个。

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

3 个答案: