Адаптивная разметка страницы с разметкой страницы

Question

У меня есть страница, разделенная на три столбца: навигация слева (фиксированная ширина), содержимое (оставшаяся ширина), навигация справа (фиксированная ширина). Ожидаемое поведение заключается в том, что при изменении размера экрана средний столбец (контент) изменяет размеры в ответ. В общем, это работает. Проблема в том, что мой центральный контент иногда содержит html таблиц, и иногда эти таблицы должны отображать больше данных, чем имеется для них горизонтальное пространство. В этой ситуации я ожидаю, что мои таблицы будут прокручиваться горизонтально, оставаясь в пределах нормальных границ столбца содержимого.

На самом деле происходит то, что таблицы растут, занимая всю ширину экрана (увеличивая содержимое колонка вместе с ними), что полностью нарушает мой интерфейс. Вместо столбцов, появляющихся рядом на странице, они располагаются вертикально. В качестве обходного пути я заставил свою страницу установить наблюдателя на событие изменения размера окна и сохранить ширину экрана в моем хранилище данных, чтобы компоненты моей таблицы могли использовать его в качестве вычисляемой подпорки и соответственно изменять свою максимальную ширину, но это заметно медлительно. sh и не является приемлемым решением в долгосрочной перспективе.

Я пытался решить эту проблему с использованием чистого css (и у меня есть ощущение, что должен быть выход), но не достиг никакого прогресса в этот фронт (кроме использования максимальной ширины, что не идеально). У меня также есть ощущение, что это та же проблема root, что и аналогичная проблема, с которой я столкнулся некоторое время назад .

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

Вам нужно будет go отказаться от использования 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>

Answer 2

У меня не было успеха при попытке использовать flex-box, как было предложено в ответе Хьюса, из-за некоторых проблем с вложенностью в моем конечном коде, поэтому я решил попытаться оптимизировать свое решение методом перебора, так как в противном случае у меня не было идей. В моем исходном решении я видел проблемы с производительностью, потому что у меня был наблюдатель для ширины страницы, который я передавал четырем компонентам таблицы на своей странице для динамической установки максимальной ширины. Вместо установки максимальной ширины для компонентов таблицы я установил столбец , содержащий всех четырех из них, уменьшив четыре значения ширины c до одного. Это дало мне результат, который мне был нужен, когда я выглядел безупречно и отзывчиво.

Столбец 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 }">