在移动设备上重新排列元素（响应式布局）

Question

这可能是一个非常基本的问题，但我对 flexbox 和响应式布局还很陌生。

我有一个在桌面上看起来像这样的页面

这是我用来获取此布局的代码

<div style="width: 100%">
        <div class="row justify-center">
            <h2>Link statistics</h2>
        </div>
      <div class="row justify-center items-center q-gutter-sm">
            <div class="col-4 items-center">
                    <q-list bordered separator>
                        <q-item clickable v-ripple>
                            <q-item-section>
                                <q-item-label><strong>Original URL:</strong>&nbsp;<a :href="orig_link">{{ orig_link }}</a></q-item-label>
                            </q-item-section>
                        </q-item>

                        <q-item clickable v-ripple>
                            <q-item-section>
                                <q-item-label><strong>Shortened URL:</strong>&nbsp;<a :href="shortened_link">{{ shortened_link }}</a></q-item-label>
                            </q-item-section>
                        </q-item>

                        <q-item clickable v-ripple>
                            <q-item-section>
                                <q-item-label><strong>Creation date:</strong> {{ format_date(creation_date) }}</q-item-label>
                            </q-item-section>
                        </q-item>

                        <q-item clickable v-ripple>
                            <q-item-section>
                                <q-item-label><strong>Total clicks:</strong> {{ total_clicks }}</q-item-label>
                                <q-item-label caption>Over {{ days_since_creation }} days</q-item-label>
                            </q-item-section>
                        </q-item>
                    </q-list>
                </div>
                <div class="col-6 items-center">
                  <div>
                    <bar-chart
                    :options="options"
                    :chart-data="datasets"
                    :styles="chartStyle">
                    </bar-chart>
                  </div>
                  <div class="text-center">
                    <q-btn
                    outlined
                    rounded
                    no-caps
                    v-for="(item, idx) in data_view_options"
                    :key="idx"
                    @click='current_data_view = idx'
                    :label=item
                    style="margin-left: 10px"
                    />
                  </div>
                </div>
        </div>
    </div>

问题是，这是它在移动屏幕上的样子：

我希望我的布局具有一定的响应性，如果左侧的列表和右侧的图表不适合放在同一行（例如，较小的屏幕）。

我怎样才能做到这一点？

Answer 1

为此，您需要响应式网格 columns。在您的情况下，它设置为 col-4 和 col-6，它将应用从最小屏幕到最大屏幕的那些列。请注意，总共有 12 列，您将 10 列居中对齐。

对于您的情况，您需要类 col-12 col-md-4、col-12 col-md-6 恭敬。然后它将在小屏幕上从 12 列开始，然后在平板电脑屏幕上跳转到 col-4/col-6。

(如果不够就设置成col-12 col-lg-4, col-12 col-lg-6)

在移动设备上重新排列元素（响应式布局）

Making elements rearrange on mobile (responsive layout)

css

responsive-design

vue.js

quasar