Bootstrapグリッドシステム2
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, Bootstrap!</title>
</head>
<body>
<h1>Grid system(等幅に分割) コンテナアリ</h1>
<div class="container-fluid">
<!-- <div class="container"> -->
<div class="row">
<div class="col-8" style="background:#FB8;height:200px">ブロックA</div>
<div class="col-4" style="background:#FD9;height:200px">ブロックB</div>
<!-- <div class="col-7" style="background:#FB8;height:200px">ブロックB</div> -->
</div>
<div class="row">
<div class="col-8" style="background:#79F;height:200px">ブロックC</div>
<div class="col-2" style="background:#9BF;height:200px">ブロックD</div>
<div class="col-2" style="background:#79F;height:200px">ブロックE</div>
</div>
</div>
<h1>Grid system(等幅に分割) コンテナアリのノーガター</h1>
<div class="container-fluid">
<!-- <div class="container"> -->
<div class="row no-gutters">
<div class="col-8" style="background:#FB8;height:200px">ブロックA</div>
<div class="col-4" style="background:#FD9;height:200px">ブロックB</div>
<!-- <div class="col-7" style="background:#FB8;height:200px">ブロックB</div> -->
</div>
<div class="row no-gutters">
<div class="col-8" style="background:#79F;height:200px">ブロックC</div>
<div class="col-2" style="background:#9BF;height:200px">ブロックD</div>
<div class="col-2" style="background:#79F;height:200px">ブロックE</div>
</div>
</div>
<h1>コンテナなしのノ－ガター</h1>
<div class="row no-gutters">
<div class="col-8" style="background:#FB8;height:200px">ブロックA</div>
<div class="col-4" style="background:#FD9;height:200px">ブロックB</div>
<!-- <div class="col-7" style="background:#FB8;height:200px">ブロックB</div> -->
</div>
<div class="row no-gutters">
<div class="col-8" style="background:#79F;height:200px">ブロックC</div>
<div class="col-2" style="background:#9BF;height:200px">ブロックD</div>
<div class="col-2" style="background:#79F;height:200px">ブロックE</div>
</div>
