寬度小於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時，我需要執行什么/添加強制網站切換到移動視圖的1105px ？

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">

因此，這就是說在較小或較小的布局中使用全角。 在中等布局中，使用四分之一的父級/行，在大布局中，使用六分之一的父級/行。

請確保其他列的sm，md，lg，xs等總計匹配12。

Answer 2

您可以使用所需的斷點創建自己的Bootstrap 3版本，只需按compile and download ，就可以了。 一旦您進入鏈接，請在“ Container sizes下檢查斷點，只需搜索關鍵字。