ブートストラップ4行の問題

Question

イムは、誰もが正しく

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="tab-section"> 
 

 
    
 

 
     <div class="row"> 
 
    <div class="col-6" style="border-right: 2px solid grey; border-bottom: 2px solid grey;"> 
 
    <div > <h2>$ 2,300</h2></div> 
 
    </div> 
 
    <div class="col-6" style="border-bottom: 2px solid grey;"> 
 
     <div><h2>$ 53,100</h2></div> 
 
    </div> 
 
    <div class="col-6" style="border-right: 2px solid grey;"> 
 
<div><h2>12</h2></div> 
 
    </div> 
 
    <div class="col-6"> 
 
<div><h2>68%</h2></div> 
 
    </div> 
 
    </div>

それを行う方法を知って、その私のために働いていない、イム使用グリッドシステム添付画像の種類のデザインを作ってみるが、正しく bootstrap 4イムを使用

Answer 1

あなたはフレックスレイアウトとブートストラップ4のスーパーのアクセス権を持って、ちょうど擬似要素を使って余分な労力を与える：前/ ：後に。

CSS：

.col { 
    margin: 1em; 
    position: relative; 
} 

.bottom-border:after { 
    content: ''; 
    width: calc(100% - 1em); 
    height: 2px; 
    background-color: grey; 
    position: absolute; 
    box-sizing: border-box; 
    bottom: -1em; 
    left: 0 
} 

.right-border:after { 
    content: ''; 
    height: 100%; 
    width: 2px; 
    background-color: grey; 
    position: absolute; 
    box-sizing: border-box; 
    right: -1em; 
    bottom: 0; 
} 

.left-border:after { 
    content: ''; 
    height: 100%; 
    width: 2px; 
    background-color: grey; 
    position: absolute; 
    box-sizing: border-box; 
    left: -1em; 
    top: 0; 
} 

.top-border:after { 
    content: ''; 
    width: calc(100% - 1em); 
    height: 2px; 
    background-color: grey; 
    position: absolute; 
    box-sizing: border-box; 
    top: -1em; 
    right: 0 
} 

とHTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> 

    <div class="tab-section text-center"> 
     <div class="row"> 
      <div class="col right-border"> 
       <div> 
        <h2>$ 2,300</h2> Today's Revenue 
       </div> 
      </div> 
      <div class="col bottom-border"> 
       <div> 
        <h2>$ 53,100</h2>Expected Revenue for this month 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col top-border"> 
       <div> 
        <h2>12</h2> Bookings taken today 
       </div> 
      </div> 
      <div class="col left-border"> 
       <div> 
        <h2>68%</h2>Total Monthly occupancy 
       </div> 
      </div> 
     </div> 
    </div> 

プレビューリンク：https://codepen.io/ziruhel/pen/EbKByd

Answer 2

疑似要素（docs）を使用できます。

必要に応じて色や長さを調整することはできますが、これは基本的なフレームワークを提供します。それは次のように私を提供し

：

.top-left, 
 
.top-right, 
 
.bottom-left, 
 
.bottom-right { 
 
    position: relative; 
 
} 
 

 
h2 { 
 
    text-align: center; 
 
} 
 

 
.top-left::after { 
 
    content: ''; 
 
    width: 90%; 
 
    height: 2px; 
 
    position: absolute; 
 
    background: grey; 
 
    bottom: -2px; 
 
} 
 

 
.top-right::before { 
 
    content: ''; 
 
    height: 90%; 
 
    width: 2px; 
 
    position: absolute; 
 
    background: grey; 
 
    left: -2px; 
 
} 
 

 
.top-right::after { 
 
    content: ''; 
 
    width: 90%; 
 
    height: 2px; 
 
    position: absolute; 
 
    background: grey; 
 
    bottom: -2px; 
 
    left: 10%; 
 
} 
 

 
.bottom-right::before { 
 
    content: ''; 
 
    height: 90%; 
 
    width: 2px; 
 
    position: absolute; 
 
    background: grey; 
 
    left: -2px; 
 
    top: 10%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="container"> 
 
    <div class="tab-section"> 
 
    <div class="row"> 
 
     <div class="col-6 top-left"> 
 
     <div> 
 
      <h2>$ 2,300</h2> 
 
     </div> 
 
     </div> 
 
     <div class="col-6 top-right"> 
 
     <div> 
 
      <h2>$ 53,100</h2> 
 
     </div> 
 
     </div> 
 
     <div class="col-6 bottom-left"> 
 
     <div> 
 
      <h2>12</h2> 
 
     </div> 
 
     </div> 
 
     <div class="col-6 bottom-right"> 
 
     <div> 
 
      <h2>68%</h2> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>