html - 使用左侧和右侧的面板创建 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%;
fiddle here
添加了 left 和 right 类，参见 HTML 第 54 和 97 行以及 CSS 第 38 行