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

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

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

确保其他列与sm，md，lg，xs等完全匹配12个。

Answer 2

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

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

2 个答案: