Menggunakan bootstrap 4.6 Saya mencoba membangun antarmuka dengan menu utama kiri, dan kemudian menu konteks kanan yang merupakan bagian dari baris anak. Saya ingin latar belakang kedua menu ini membentang ke bagian bawah tampilan, namun semua yang saya coba akhirnya membuat bilah gulir dengan menu kanan lebih panjang dari kiri

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <body style="height: 100%;">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 bg-primary">
                    <h1>Logo</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-2 bg-secondary pt-2">
                    <h5>Main Menu</h5>
                    <ul class="nav flex-column">
                        <li class="nav-item pl-3">
                            Menu 1
                        </li>
                        <li class="nav-item pl-3">
                            Menu 2
                        </li>
                        <li class="nav-item pl-3">
                            Menu 3
                        </li>
                    </ul>
                </div>
                <div class="col p-0">
                    <div class="p-4 bg-warning">
                        <h3 class="m-0">Header</h3>
                        <div class="text-secondary">Subheader</div>
                    </div>
                    <div class="row no-gutters">
                        <div class="col ml-3 mr-2">
                            <h1>Lorem Ipsum</h1>

                            <p>Lorem ipsum </p>                
                        </div>
                        <div class="col-2 bg-danger p-2">
                            <h5>Context Menu</h5>
                            <ul class="nav flex-column">
                                <li class="nav-item pl-3">
                                    Menu 1
                                </li>
                                <li class="nav-item pl-3">
                                    Menu 2
                                </li>
                                <li class="nav-item pl-3">
                                    Menu 3
                                </li>
                            </ul>  
                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </body>

Ini adalah outputnya. screenshot keadaan saat ini html css twitter-bootstrap bootstrap-4

0
sysnickm 12 Mei 2021, 18:33

1 menjawab

Jawaban Terbaik

Anda ingin menggunakan kelas utilitas flexbox, sizing, dan overflow...

  • d-flex flex-column untuk menyetel flexbox
  • flex-fill untuk membuat flexbox anak mengisi (meregangkan) ketinggian yang tersisa
  • overflow- sesuai kebutuhan bergulir
<div class="container-fluid vh-100 d-flex flex-column">
    <div class="row">
        <div class="col-12 bg-primary">
            <h1>Logo</h1>
        </div>
    </div>
    <div class="row flex-fill overflow-hidden">
        <div class="col-2 bg-secondary pt-2">
            <h5>Main Menu</h5>
            <ul class="nav flex-column">
                <li class="nav-item pl-3"> Menu 1 </li>
                <li class="nav-item pl-3"> Menu 2 </li>
                <li class="nav-item pl-3"> Menu 3 </li>
            </ul>
        </div>
        <div class="col p-0 h-100 overflow-hidden d-flex flex-column">
            <div class="p-4 bg-warning">
                <h3 class="m-0">Header</h3>
                <div class="text-secondary">Subheader</div>
            </div>
            <div class="row no-gutters flex-fill overflow-auto">
                <div class="col ml-3 mr-2">
                    <h1>Lorem Ipsum</h1>
                    <p>Lorem ipsum </p>
                    <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
                    <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
                </div>
                <div class="col-2 bg-danger p-2">
                    <h5>Context Menu</h5>
                    <ul class="nav flex-column">
                        <li class="nav-item pl-3"> Menu 1 </li>
                        <li class="nav-item pl-3"> Menu 2 </li>
                        <li class="nav-item pl-3"> Menu 3 </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/p/jnyyitC7VU

1
Zim 12 Mei 2021, 19:50