如何使矩形居中並與Bootstrap響應？

我正在嘗試爲網絡製作棋盤遊戲。我想使用Bootstrap使元素響應。如何使矩形居中並與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>

來源

2016-04-01 ts248

在這裏你可以看到一個例子：你不需要COL-XS-12。您只需在父級中設置contaier-fluid，並使用box-sizing：border-box在div包裝器中填充一些填充。行用於重置具有負餘量的容器和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>

來源

2016-04-01 06:55:21

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>

來源

2016-04-01 07:03:36

html,body{ 
 
    height:100%; 
 
    background:#FF3366; 
 
    } 
 

 
.container { 
 
    width:100%; 
 
    height:100%; 
 
\t 
 
\t 
 
} 
 
.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"> 
 
\t <div class="row"> 
 
    \t \t <div class="col-xs-12">The game-board</div> 
 
    </div>  
 
</div>

試試這一個。

來源

2016-04-01 07:23:43

如何使矩形居中並與Bootstrap響應？

回答

相關問題