मुझे यह साइडबार कोड स्निपेट मिला, मैं इसे कैसे बदलूं ताकि साइडबार छोटी स्क्रीन पर शीर्ष पर ढेर हो जाए और बड़ी स्क्रीन पर एक निश्चित चौड़ाई या अधिकतम चौड़ाई हो। मैंने एक तरफ तत्व को अधिकतम-चौड़ाई के साथ सीमित करने का प्रयास किया है लेकिन यह काम नहीं कर रहा है।

<div class="container-fluid">
            <div class="row wrapper min-vh-100 flex-column flex-sm-row">
                <aside class="col-12 col-sm-2 p-0 bg-dark flex-shrink-1">
                    <nav class="navbar navbar-expand-sm navbar-dark bg-dark align-items-start flex-sm-column flex-row">
                        <a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a>
                        <a href class="navbar-toggler" data-toggle="collapse" data-target=".sidebar">
                            <span class="navbar-toggler-icon"></span>
                        </a>
                        <div class="collapse navbar-collapse sidebar">
                            <ul class="flex-column navbar-nav w-100 justify-content-between">
                                <li class="nav-item">
                                    <a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false">
                                        <i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
                                    </a>
                                    <div class="collapse" id="m1">
                                        <ul class="flex-column nav">
                                            <a class="nav-link px-0 text-truncate" href="#">Sub</a>
                                            <a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
                                        </ul>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </aside>
                <main class="col bg-faded py-3">
                    <h2>Main</h2>
                    <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>
                </main>
            </div>
        </div>
-2
Yilun Yang 20 अक्टूबर 2020, 15:21

1 उत्तर

सबसे बढ़िया उत्तर
@media (min-width: 576px) {
  
  aside {
    width: 200px !important;
   }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>

<!-- your code -->

<div class="container-fluid">
            <div class="row wrapper min-vh-100 flex-column flex-sm-row">
                <aside class="p-0 bg-dark flex-shrink-0">
                    <nav class="navbar navbar-expand-sm navbar-dark bg-dark align-items-start flex-sm-column flex-row">
                        <a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a>
                        <a href class="navbar-toggler" data-toggle="collapse" data-target=".sidebar">
                            <span class="navbar-toggler-icon"></span>
                        </a>
                        <div class="collapse navbar-collapse sidebar">
                            <ul class="flex-column navbar-nav w-100 justify-content-between">
                                <li class="nav-item">
                                    <a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false">
                                        <i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
                                    </a>
                                    <div class="collapse" id="m1">
                                        <ul class="flex-column nav">
                                            <a class="nav-link px-0 text-truncate" href="#">Sub</a>
                                            <a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
                                        </ul>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </aside>
                <main class="col bg-faded py-3">
                    <h2>Main</h2>
                    <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>
                </main>
            </div>
        </div>


<!-- your code -->







<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>

इन वर्गों को एक तरफ के तत्व col-12 col-sm-2 से हटा दें और एक मीडिया क्वेरी नियम जोड़ें।

0
Dharman 20 अक्टूबर 2020, 15:03