使用左側和右側面板創建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%;
在這里擺弄
添加left right類，請參見HTML第54和97行以及CSS第38行