Как я могу разделить этот код Bootstrap между заголовком и основной частью? - PullRequest
Новая
       87

Как я могу разделить этот код Bootstrap между заголовком и основной частью?

0 голосов
/ 17 июня 2020

Я работаю на веб-сайте stati c, где мне разрешено использовать HTML, CSS и Bootstrap. У меня есть этот Bootstrap код для адаптивной боковой панели навигации, но он также содержит весь код для основного раздела: 

<div class="container-fluid">
<div class="row min-vh-100 flex-column flex-md-row">
    <aside class="col-12 col-md-2 p-0 bg-dark flex-shrink-1">
        <nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start py-2">
            <div class="collapse navbar-collapse ">
                <ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between">
                    <li class="nav-item">
                        <a class="nav-link pl-0 text-nowrap" href="#"><i class="fa fa-bullseye fa-fw"></i> <span class="font-weight-bold">Brand</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="d-none d-md-inline">Link</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link pl-0" href="#"><i class="fa fa-cog fa-fw"></i> <span class="d-none d-md-inline">Link</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link pl-0" href="#"><i class="fa fa-heart codeply fa-fw"></i> <span class="d-none d-md-inline">Codeply</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link pl-0" href="#"><i class="fa fa-star codeply fa-fw"></i> <span class="d-none d-md-inline">Link</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link pl-0" href="#"><i class="fa fa-star fa-fw"></i> <span class="d-none d-md-inline">Link</span></a>
                    </li>
                </ul>
            </div>
        </nav>
    </aside>
    <main class="col bg-faded py-3 flex-grow-1">
        <h2>Example</h2>
        <p>
            This is a Bootstrap 4 example layout that includes a Sidebar menu. On larger screen widths, the Sidebar is on the 
            left side and consumes the entire page height. It's vertically positioned down the screen. On smaller screen widths (like mobile phones and tablets), the Sidebar
            moves to the top of the page, and becomes horizontally positioned across the page like a Navbar. Only icons are shown
            on mobile to limit use of screen real estate.
        </p> 
        <p>
            This Sidebar works using only Bootstrap CSS classes and doesn't require JavaScript. It utilizes the responsive Navbar classes
            to auto-magically switch the Sidebar orientation.
        </p> 
    </main>
</div>

Как я могу разделить его так, чтобы строка меню переходит в <header>, а основной раздел - в <body><section>?

Я пробовал разделить код между тегами и добавить классы BS4 в div в теге раздела, но это не отображается текст.

1 Ответ

0 голосов
/ 20 июня 2020

Я полагаю, вы просто забываете </div> в конце для жидкости-контейнера. Когда я добавил, что это результат работы.

enter image description here

However, if the functionality of the gif is not what you want and does not fix the problem for you then I did separate you nav bar into the header and your main into the body which resulted in this: enter image description here

Code Demo of separated code into body and header: JSFiddle Demo

...