与左边和右边

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