Laravel 布局方向更改答案

【问题标题】：Laravel Layout Orientaton changeLaravel 布局方向更改
【发布时间】：2020-08-27 07:11:51
【问题描述】：

我知道 CSS 媒体查询，例如

@media screen and (orientation: portrait) {
    div.container {
        ...
    }
}
@media screen and (orientation: landscape) {
    div.container {
        ...
    }
}

但是我希望充分利用引导程序来响应屏幕方向的变化。我也知道实际的刀片不是反应式的。两种布局将静态呈现为：

肖像

  <div class="container-fluid d-flex min-vh-100 flex-column">
        <div class="row">
            <div class="col">
                <div id="dashboard"></div>
            </div>
        </div>
        <div class="row flex-fill fill d-flex red">
            <div class="col ">
                Content Sed ut perspiciatis unde omnis iste natus error sit voluptatem..
            </div>
        </div>
    </div>

和风景

  <div class="container-fluid d-flex min-vh-100 flex-column">
        <div class="row flex-fill fill d-flex">
            <div class="col-1">
                <div id="dashboard"></div>
            </div>
            <div class="col ">
                Content Sed ut perspiciatis unde omnis iste natus error sit voluptatem..
            </div>
        </div>
    </div>

我不知道如何结合这些 html 和 css。我不想重新加载页面。

【问题讨论】：

标签： html css bootstrap-4 laravel-blade

【解决方案1】：

采用纯 HTML 和 CSS 作为最简洁的方法，使用 flexbox：

<header>header</header>
<div class="dd-bodyframe">
    <div class="dd-body">
        main body content
    </div>
    <div class="dd-body-pre">
        pre body content
    </div>
    <div class="dd-body-aft">
        after main
    </div>
</div>
<footer>footer</footer>

和css

body,.dd-bodyframe {
    display: flex;
    flex-direction: column;
}

.dd-body-pre {
    order: -1;
}

@media screen and (orientation: landscape) {
    .dd-bodyframe {
        flex-direction: row;
        flex: 1;
    }
    .dd-body {
        flex: 1;
    }
    .dd-body-pre, .dd-body-aft {
        /* 12em is the width of the columns */
        flex: 0 0 12em;
    }
}

【讨论】：