與左邊和右邊

Question

面板來創建這樣的佈局創建引導佈局：

...但與具有在左右這樣一個小組的困難。

希望有人能幫忙。這是我到目前爲止。

https://jsfiddle.net/o1g39soq/

<div class="row flex-row"> 
<div class="panel panel-default flex-col"> 
<div class="panel-heading">Title flex-col</div> 
<div class="panel-body flex-grow" style="height: 20%"> 
    <div class="row seven-cols flex-row"> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"> 
     <div class="panel panel-default no-margin flex-col"> 
     <div class="panel-heading">Title flex-col</div> 
     <div class="panel-body flex-grow">Content here -- div with .flex-grow</div> 
     <div class="panel-footer">Footer</div> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="panel panel-default no-margin flex-col"> 
     <div class="panel-heading">Title flex-col</div> 
     <div class="panel-body flex-grow">Content here -- div with .flex-grow</div> 
     <div class="panel-footer">Footer</div> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="panel panel-default no-margin flex-col"> 
     <div class="panel-heading">Title flex-col</div> 
     <div class="panel-body flex-grow">Content here -- div with .flex-grow</div> 
     <div class="panel-footer">Footer</div> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="panel panel-default no-margin flex-col"> 
     <div class="panel-heading">Title flex-col</div> 
     <div class="panel-body flex-grow">Content here -- div with .flex-grow</div> 
     <div class="panel-footer">Footer</div> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="panel panel-default no-margin flex-col"> 
     <div class="panel-heading">Title flex-col</div> 
     <div class="panel-body flex-grow">Content here -- div with .flex-grow</div> 
     <div class="panel-footer">Footer</div> 
     </div> 
    </div> 
    <div class="col-md-1"></div> 
    </div> 

</div> 

<div class="panel-body flex-grow" style="max-height:30px; background-color: #f5f5f5"> 
</div> 

<div class="panel-body flex-grow"> 
    <div class="row seven-cols flex-row"> 
    <div class="col-md-1"> 
     <div class="panel panel-default flex-col"> 
     <div class="panel-heading">Title flex-col</div> 
     <div class="panel-body flex-grow">Content here -- div with .flex-grow</div> 
     <div class="panel-footer">Footer</div> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="panel panel-default flex-col"> 
     <div class="panel-heading">Title flex-col</div> 
     <div class="panel-body flex-grow">Content here -- div with .flex-grow</div> 
     <div class="panel-footer">Footer</div> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="panel panel-default flex-col"> 
     <div class="panel-heading">Title flex-col</div> 
     <div class="panel-body flex-grow">Content here -- div with .flex-grow</div> 
     <div class="panel-footer">Footer</div> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="panel panel-default flex-col"> 
     <div class="panel-heading">Title flex-col</div> 
     <div class="panel-body flex-grow">Content here -- div with .flex-grow</div> 
     <div class="panel-footer">Footer</div> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="panel panel-default flex-col"> 
     <div class="panel-heading">Title flex-col</div> 
     <div class="panel-body flex-grow">Content here -- div with .flex-grow</div> 
     <div class="panel-footer">Footer</div> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="panel panel-default flex-col"> 
     <div class="panel-heading">Title flex-col</div> 
     <div class="panel-body flex-grow">Content here -- div with .flex-grow</div> 
     <div class="panel-footer">Footer</div> 
     </div> 
    </div> 
    <div class="col-md-1"> 
     <div class="panel panel-default flex-col"> 
     <div class="panel-heading">Title flex-col</div> 
     <div class="panel-body flex-grow">Content here -- div with .flex-grow</div> 
     <div class="panel-footer">Footer</div> 
     </div> 
    </div> 
    </div> 


</div> 
<div class="panel-footer">Footer</div> 

這裏是CSS。

html, 
body { 
    height: 100%; 
    width: 100%; 
} 

.container, 
.row { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
} 

.flex-row, 
.flex-row > div[class*='col-'] { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    flex: 0 auto; 
    height: 100%; 
} 

.flex-col { 
    display: flex; 
    display: -webkit-flex; 
    flex: 1; 
    flex-flow: column nowrap; 
} 

.flex-grow { 
    display: flex; 
    -webkit-flex: 2; 
    flex: 2; 
} 

@media (min-width: 768px) { 
    .seven-cols .col-md-1, 
    .seven-cols .col-sm-1, 
    .seven-cols .col-lg-1 { 
    width: 100%; 
    *width: 100%; 
    } 
} 

@media (min-width: 992px) { 
    .seven-cols .col-md-1, 
    .seven-cols .col-sm-1, 
    .seven-cols .col-lg-1 { 
    width: 14.285714285714285714285714285714%; 
    *width: 14.285714285714285714285714285714%; 
    } 
} 


/** 
* The following is not really needed in this case 
* Only to demonstrate the usage of @media for large screens 
*/ 

@media (min-width: 1200px) { 
    .seven-cols .col-md-1, 
    .seven-cols .col-sm-1, 
    .seven-cols .col-lg-1 { 
    width: 14.285714285714285714285714285714%; 
    *width: 14.285714285714285714285714285714%; 
    } 
} 

.panel-body { 
    padding-bottom: 0; 
    padding-top: 0; 
} 

.no-margin { 
    margin-bottom: 0; 
} 

請幫忙。

Answer 1

嘗試position: relative;和top: -50%;
小提琴here
新增left和right類，請參見HTML線54和97和CSS線38