Bootstrap 4 Развернуть столбец на боковую панель на экранах XL В противном случае упорядочить между двумя областями содержимого - PullRequest
0 голосов
/ 27 мая 2020

Это то, что я хочу, чтобы он выглядел на полноэкранном рабочем столе / ноутбуке.

Full screen devices

На устройствах среднего / меньшего размера я хочу правую боковую панель, чтобы свернуть в и под области ввода поиска и перед областью содержимого.

Маленькие устройства (сложить боковую панель)

Smaller devices

Я думаю, что это может быть достигнуто с помощью Bootstrap order классов, но не уверен, какая структура макета сетки (контейнер, строки, столбцы) для этого.

Код ниже показывает большую пустую область под областью поиска на экранах xl. Я хочу, чтобы область содержимого заполнила эту пустую область сразу после поиска.

Move content up below search area

Рабочий пример полного копирования / вставки:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="ie=edge" http-equiv="X-UA-Compatible">
        <link href="css/bootstrap.css" rel="stylesheet">
        <title>Page Title Here</title>

        <style>
            html, body {
                height: 100%;
            }
            div {
                border: 1px solid #9fcdff;
            }
            header {
                border: 1px solid #9fcdff;
            }
            main {
                height: 100%;
            }
            footer div {
                border: 1px solid #ff63ba;
                padding: 20px;
                margin: 0;
            }
        </style>


    </head>
    <body>

        <header>
            <nav class="navbar navbar-expand-md navbar-light bg-light">
                    <button class="navbar-toggler mr-2" id="nav-button"
                            type="button"><i class="fas fa-bars"></i></button>
                    <div class="ml-auto ml-md-0"></div>
                    <a class="navbar-brand">Website</a>
                    <i class="ml-md-auto fas fa-cog"></i>
            </nav>
        </header>

        <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-4 col-xl-3 d-none d-lg-block" id="sidebar">
                        <ul>
                            <li>Sidebar</li>
                        </ul>
                    </div>
                    <div class="col">
                        <div class="row">

                            <div class="col-12 col-xl-9 order-xl-0" id="search-stuff">

                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item">
                                            <a href="#">Home</a>
                                        </li>
                                        <li class="breadcrumb-item active" aria-current="page">Library</li>
                                    </ol>
                                </nav>

                                <form>
                                    <div class="form-group">
                                        <input class="form-control" type="search" placeholder="Search...">
                                    </div>
                                </form>

                            </div>

                            <div class="col-12 col-xl-3 order-xl-1" id="cards-stuff">
                                <div class="card">
                                    <img class="d-none d-xl-block card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17257b364f9%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17257b364f9%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content.
                                        </p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                                <div class="card">
                                    <img class="d-none d-xl-block card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17257b364f9%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17257b364f9%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                                         alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content.
                                        </p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-xl-9 order-xl-2" id="content-stuff">
                                <div class="post">
                                    <h2>Some Headline Here...</h2>
                                    <p>CSS</p>
                                </div>
                                <div class="post">
                                    <h2>Some Headline Here...</h2>
                                    <p>CSS</p>
                                </div>
                                <div class="post">
                                    <h2>Some Headline Here...</h2>
                                    <p>CSS</p>
                                </div>
                                <div class="post">
                                    <h2>Some Headline Here...</h2>
                                    <p>CSS</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>

        <footer>
            <div>Copyright 2020</div>
        </footer>


        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/custom.js"></script>

    </body>
</html>

1 Ответ

1 голос
/ 28 мая 2020

Как обычно, отвечу на свой вопрос. Я продублировал код правой боковой панели и отобразил либо тот, либо другой в зависимости от размера экрана. Интересно, распространено ли это на практике или не одобряется. Мне бы очень хотелось избежать дублирования кода, но эта проблема кажется довольно сложной из-за наложения столбца между двумя блоками содержимого. Если бы он был сверху или снизу, это не было бы проблемой.

Вот моя лучшая попытка. Сомневаюсь, что у кого-нибудь будет лучший ответ.

collapsing column into another

Код:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="ie=edge" http-equiv="X-UA-Compatible">
        <link href="css/bootstrap.css" rel="stylesheet">
        <title>Page Title Here</title>

        <style>
            html, body {
                height: 100%;
            }

            div {
                border: 1px solid #9fcdff;
            }

            header {
                border: 1px solid #9fcdff;
            }

            main {
                height: 100%;
            }

            footer div {
                border: 1px solid #ff63ba;
                padding: 20px;
                margin: 0;
            }
        </style>


    </head>
    <body>

        <header>
            <nav class="navbar navbar-expand-md navbar-light bg-light">
                <button class="navbar-toggler mr-2" id="nav-button"
                        type="button"><i class="fas fa-bars"></i></button>
                <div class="ml-auto ml-md-0"></div>
                <a class="navbar-brand">Website</a>
                <i class="ml-md-auto fas fa-cog"></i>
            </nav>
        </header>

        <div class="container-fluid">
            <div class="row">

                <div class="col-lg-4 col-xl-3 d-none d-lg-block" id="sidebar">
                    <ul>
                        <li>Sidebar</li>
                    </ul>
                </div>

                <div class="col-lg-8 col-xl-6">

                        <div class="align-self-start" id="search-stuff">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">
                                        <a href="#">Home</a>
                                    </li>
                                    <li aria-current="page" class="breadcrumb-item active">Library</li>
                                </ol>
                            </nav>
                            <form>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Search..." type="search">
                                </div>
                            </form>
                        </div>
                        <div class="d-lg-block d-xl-none" id="cards-stuff">
                            <div class="card">
                                <img alt="Card image cap"
                                     class="d-none d-xl-block card-img-top"
                                     src="img/placeholder.svg">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up the bulk of the card's content.
                                    </p>
                                    <a class="btn btn-primary" href="#">Go somewhere</a>
                                </div>
                            </div>
                            <div class="card">
                                <img alt="Card image cap"
                                     class="d-none d-xl-block card-img-top"
                                     src="img/placeholder.svg">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up the bulk of the card's content.
                                    </p>
                                    <a class="btn btn-primary" href="#">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                        <div class="" id="content-stuff">
                            <div class="post">
                                <h2>Some Headline Here...</h2>
                                <p>CSS</p>
                            </div>
                            <div class="post">
                                <h2>Some Headline Here...</h2>
                                <p>CSS</p>
                            </div>
                            <div class="post">
                                <h2>Some Headline Here...</h2>
                                <p>CSS</p>
                            </div>
                            <div class="post">
                                <h2>Some Headline Here...</h2>
                                <p>CSS</p>
                            </div>
                        </div>

                </div>

                <div class="col-xl-3 d-none d-xl-block">
                    <div id="cards-sidebar">
                        <div class="card">
                            <img alt="Card image cap"
                                 class="d-none d-xl-block card-img-top"
                                 src="img/placeholder.svg">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up
                                    the bulk of the card's content.
                                </p>
                                <a class="btn btn-primary" href="#">Go somewhere</a>
                            </div>
                        </div>
                        <div class="card">
                            <img alt="Card image cap"
                                 class="d-none d-xl-block card-img-top"
                                 src="img/placeholder.svg">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up
                                    the bulk of the card's content.
                                </p>
                                <a class="btn btn-primary" href="#">Go somewhere</a>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>

        <footer>
            <div>Copyright 2020</div>
        </footer>


        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/custom.js"></script>

    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...