在左侧和右侧创建带有面板的Bootstrap布局

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行