响应式分页布局

Question

我有一个页面分为三列：左侧导航（固定宽度），内容（剩余宽度），右侧导航（固定宽度）。预期的行为是，当屏幕调整大小时，中间列（内容）会响应地调整大小。一般来说，这是可行的。问题是我的中心内容有时有 html 表格，有时这些表格需要显示的数据多于它们的水平空间。在这种情况下，我的期望是我的表格应该水平滚动，同时保持在内容列的正常范围内。

实际发生的情况是表格增长到占据屏幕的整个宽度（同时扩大了内容列），这完全破坏了我的 UI。它们不是在页面上彼此相邻出现的列，而是垂直堆叠。作为一种解决方法，我让我的页面在窗口调整大小事件上设置了一个观察者，并将屏幕宽度存储在我的数据存储中，以便我的表格组件可以将其用作计算道具并相应地更改它们的最大宽度，但这显然是缓慢的并且不是长期可接受的解决方案。

我一直在尝试使用纯 css 来解决这个问题（并且感觉一定有办法），但在这方面没有取得任何进展（除了使用不理想的 max-width 之外）。我也有一种感觉，这与我 encountered a while back 的类似问题是同一个根本问题。

new Vue({
  el: "#app",
  data: {}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.5.0/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.5.0/dist/bootstrap-vue.css" rel="stylesheet" />

<div id="app">
  <b-container fluid>
    <b-row>
      <b-col cols="auto">
        <div>left col</div>
      </b-col>
      <b-col>
        <b-button class="w-100" v-b-toggle="'collapse'">center col</b-button>
        <b-collapse id="collapse">
          <div class="w-100">
            <b-table-simple responsive>
              <b-thead>
                <b-tr>
                  <b-th>
                    Question:
                  </b-th>
                  <b-th v-for="i in 50" :key="i">{{ i }}
                  </b-th>
                </b-tr>
              </b-thead>
            </b-table-simple>
          </div>
        </b-collapse>
      </b-col>
      <b-col cols="auto">
        <div>right col</div>
      </b-col>
    </b-row>
  </b-container>
</div>

Answer 1

由于我的最终代码中存在一些嵌套问题，我没有成功尝试使用 Hiws 的回答中建议的 flex-box，因此我决定尝试优化我的蛮力解决方案，因为我没有其他想法。在我最初的解决方案中，我看到了性能问题，因为我有一个页面宽度观察器，我将其传递给页面上的四个表格组件以动态设置最大宽度。我没有在表格组件上设置最大宽度，而是将其设置在 包含 所有四个组件的列上，将四个动态宽度减少到一个。这给了我所需的结果，同时看起来无缝且响应迅速。

JS 栏目：

  data() {
    return {
      windowWidth: window.innerWidth
    };
  },
  computed: {
    // magic number
    maxWidth() {
      return `${this.windowWidth - 612}px`;
    }
  },
  mounted() {
    window.addEventListener("resize", this.widthHandler);
  },
  destroyed() {
    window.removeEventListener("resize", this.widthHandler);
  },
  methods: {
    widthHandler() {
      this.windowWidth = window.innerWidth;
    }
  }

列 CSS：

<b-col :style="{ 'max-width': maxWidth }">

Answer 2

您需要在页面布局中不再使用b-row 和b-col，而是在两侧面板上定义min-width，并将中间容器设置为width: 100% 和overflow-x: auto。 然后用display: flex将整个东西包裹在一个容器中。

我已经在 Chrome、Chromium Edge 和 Firefox 中对其进行了测试。

new Vue({
  el: "#app"
});

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.side-panel {
  min-width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.5.0/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="app">
  <b-container fluid>
    <div class="d-flex">
      <div class="side-panel">
        <div>left col</div>
      </div>
      <div class="table-wrap">
        <b-button class="w-100" v-b-toggle="'collapse'">center col</b-button>
        <b-collapse id="collapse">
          <div class="w-100">
            <b-table-simple responsive>
              <b-thead>
                <b-tr>
                  <b-th>
                    Question:
                  </b-th>
                  <b-th v-for="i in 50" :key="i">{{ i }}
                  </b-th>
                </b-tr>
              </b-thead>
            </b-table-simple>
          </div>
        </b-collapse>
      </div>
      <div class="side-panel">
        <div>right col</div>
      </div>
    </div>
  </b-container>
</div>