Question

我的Flexbox布局内的响应式Bootstrap表不起作用。看来“响应表”类的溢出属性无效。

如果我将外部布局从flexbox更改为float div，那么一切都会很好。

你们中的某人有一个主意吗？

.is-app {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  background: #ccc;
}

.is-header {
  background: #000;
  height: 45px;
}

.is-main {
  display: flex;
}

.is-sidebar {
  width: 300px;
  flex-basis: 300px;
  flex-grow: 0;
  flex-shrink: 0;
  height: 400px;
  background: red;
}

.is-content {
  padding: 20px;
  flex: 1;
}

.is-content-inner {
  background: #ccc;
  width: 100%;
  height: 100%;
}

.is-footer {
  background: #000;
  height: 45px;
}

.is-table-wrap {
  overflow-y: auto;
}

<body>

  <div class="is-app">

    <header class="is-header"></header>

    <main class="is-main">
      <aside class="is-sidebar"></aside>
      <div class="is-content">
        <div class="is-content-inner">
          <div class="table-responsive">
            <table class="table table-borderless table-dark">
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <th scope="row">1</th>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <th scope="row">1</th>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </main>

    <footer class="is-footer"></footer>

  </div>

</body>

https://jsfiddle.net/JulesMu/oeq1bzr8/

Flexbox中的响应表不起作用

0 个答案: