Bootstrap 3嵌套網格響應

Question

我正在嘗試制作像波紋管圖像這樣的嵌套網格，有人可以幫助我做到這一點嗎？ 我嘗試了很多，但失敗了，這是我的密碼筆

 body { margin: 0 auto; padding: 0; font-size: 100%; font-family: Arial, Helvetica, sans-serif; max-width:1440px } .bborder{ border: 1px solid #000; } .cborder { border: 1px solid #000; height: 150px; } .border { border: 1px solid #000; height: 450px; } .aborder { border: 1px solid #000; height: 300px; } .color { background: #B5E61D; } .color_1 { background: #99D9EA; } .color_2 { background: #B97A57; } .color_3 { background: #A349A4; } .color_4 { background: #EFE4B0; } .color_5 { background: #FFC90E; } .color_6 { background: #C8BFE7; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-12 col-lg-12 bborder"> <div class="row"> <div class="col-md-9 col-lg-9 border"> <div class="col-md-4 col-lg-4"> <div class="row"> <div class="col-md-12 col-lg-12 aborder color_4"> <div class="row"> </div> </div> </div> <div class="row"> <div class="col-md-12 col-lg-12 cborder color_4"> <div class="row"> </div> </div> </div> </div> <div class="col-md-5 col-lg-5"> </div> </div> <div class="col-md-3 col-lg-3"> <div class="row"> <div class="col-md-12 col-lg-12 cborder color_5"> </div> </div> </div> </div> </div> 

Answer 1

您可以嘗試使用CSS網格布局。 示例（通過媒體查詢更新）：

 .grid>div { min-height: 200px; margin-bottom: .5em; } .grid>div:nth-of-type(1) { background: lightgrey; } .grid>div:nth-of-type(2) { background: #FFF200; } .grid>div:nth-of-type(3) { background: #C50C70; } .grid>div:nth-of-type(4) { background: #E36357; } .grid>div:nth-of-type(5) { background: #9DC727; } .grid>div:nth-of-type(6) { background: #00ACF3; } @media (min-width: 768px) { .grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 200px); grid-gap: .5em; } .grid>div { margin-bottom: 0; } .grid>div:nth-of-type(1) { grid-column: 1 / 3; grid-row: 1 / 3; } .grid>div:nth-of-type(2) { grid-column: 3 / 5; grid-row: 1; } .grid>div:nth-of-type(3) { grid-column: 5 / 6; grid-row: 1 / 4; } .grid>div:nth-of-type(4) { grid-column: 3 / 4; grid-row: 2 / 3; } .grid>div:nth-of-type(5) { grid-column: 4 / 5; grid-row: 2 / 4; } .grid>div:nth-of-type(6) { grid-column: 1 / 4; grid-row: 3 / 4; } } 

 <div class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>