長方形を中央に配置し、ブートストラップに反応する方法を教えてください。

Question

私はボードゲームをWeb用に採用しようとしています。 私は要素を反応させるためにブートストラップを使いたいと思っています。

ゲームの主な要素は長方形（ゲームボード）です。これは、すべてのディスプレイサイズの中央に表示され、すべての側に余裕を持って表示されます。

どの属性とCSSルールを適用する必要がありますか？ 通常のコンテナまたはコンテナ流体を使用しますか？

コンテナ/行内に1つの列を作成し、それに「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を、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>

Answer 2

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>

Answer 3

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>

、このいずれかを試してみてください。