html - 当宽度小于 X 像素时更改布局

Question

我正在使用 Laravel 和 Bootstrap 开发一个网站。该网站在桌面和移动设备上看起来不错(第一张和第三张图片)，但在第二张图片上看起来很丑，当我开始减小宽度并且它还没有切换到移动 View 时。

桌面 View :

扭曲的 View (我不想要):

移动 View :

这是我目前拥有的代码:

@extends('layouts.app')

<?php
$loggedIn = Auth::check();
$user = Auth::user();
?>

<style>
    /* Set height of the grid so .sidenav can be 100% (adjust if needed) */
    .row.content {height: 1500px}

    /* Set gray background color and 100% height */
    .sidenav {
        height: 100%;
    }

    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
        .sidenav {
            height: auto;
            padding: 15px;
        }
        .row.content {height: auto;}
    }

    @media screen and (max-width: 576px) {
        .col-sm-2, col-sm-8 { display: flex; flex-flow: column; }
        #one { order: 3; }
        #two { order: 1;  }
        #three { order: 2; }
    }
</style>

@section('content')
    @if ($loggedIn)
        <div class="container-fluid">
            <div class="row content">

                <div class="col-xs-2 sidenav" id="one">
                    <div class="row justify-content-center">
                        <div class="container-fluid">
                            <div class="card card-default">
                                <div class="card-header">Navigation</div>

                                <div class="card-body">
                                    <ul class="list-group">
                                        <li class="list-group-item"><a href="#section1">Home</a></li>
                                        <li class="list-group-item"><a href="#section2">Messages</a></li>
                                        <li class="list-group-item"><a href="#section3">People</a></li>
                                        <li class="list-group-item"><a href="#section3">Photos</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-8" id="two">
                    <div class="row justify-content-center">
                        <div class="container-fluid">
                            <div class="card card-default">
                                <div class="card-header">Recent Posts</div>

                                <div class="card-body">
                                    Here will be recent posts.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-2 sidenav" id="three">
                    <div class="row justify-content-center">
                        <div class="container-fluid">
                            <div class="card card-default">
                                <div class="card-header">Dashboard</div>

                                <div class="card-body">
                                    You are logged in as <strong>{{$user->name}}</strong>.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="container-fluid">
            <div class="row content">

                <div class="col-sm-2 sidenav" id="one">
                    <div class="row justify-content-center">
                        <div class="container-fluid">
                            <div class="card card-default">
                                <div class="card-header">Navigation</div>

                                <div class="card-body">
                                    <ul class="list-group">
                                        <li class="list-group-item"><a href="#section1">Home</a></li>
                                        <li class="list-group-item"><a href="#section2">Messages</a></li>
                                        <li class="list-group-item"><a href="#section3">People</a></li>
                                        <li class="list-group-item"><a href="#section3">Photos</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-8" id="two">
                    <div class="row justify-content-center">
                        <div class="container-fluid">
                            <div class="card card-default">
                                <div class="card-header">Recent Posts</div>

                                <div class="card-body">
                                    <strong>You are not logged in!</strong><hr>
                                    Here will be recent posts.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-2 sidenav" id="three">
                    <div class="row justify-content-center">
                        <div class="container-fluid">
                            <div class="card card-default">
                                <div class="card-header">Dashboard</div>

                                <div class="card-body">
                                    You are not logged in!
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

问题是:

当宽度小于或等于 1105px 时，我需要做什么/添加以强制网站切换到移动 View ？

Answer 1

您应该尝试使用列 xs、sm、md、lg 等。不要不要害怕在一个 div 中使用多个列 - 例如你有:

<div class="col-sm-2 sidenav" id="one">

如果你做了这样的事情会怎么样:

<div class="col-sm-12 col-md-3 col-lg-2 sidenav" id="one">

所以这就是说在一个小的或超小的布局中，全 Angular 。在中型布局中，使用父级/行的四分之一，在大型布局中使用父级/行的六分之一。

确保其他列的 sm、md、lg、xs 等总共匹配 12