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

Question

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

桌面视图：

扭曲的视图（我不想要）：

移动端视图：

这是我目前拥有的代码：

@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时，我需要做什么/添加以强制网站切换到移动视图？

Answer 1

您可以使用想要的断点创建自己的Bootstrap 3 版本，然后按compile and download 即可。检查Container sizes下的断点，只要搜索关键字，一旦你得到链接。

Answer 2

您应该尝试使用 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">

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

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