Question

Suppose I have a div which is the container of a sidebar (available on the left) and of a main content (available on the right).

I want make the sidebar navigation collapsible, so through a button the user can hide or display the sidebar.

I'm currently using Bootstrap 4 and all the solution proposed on Internet have a lot of work to make this, I'm looking for a simple way to achieve this.

Actually this is my code:

<div class="container-fluid">
<div class="row">
    <div class="col-3 px-1 bg-dark" id="sticky-sidebar">
        <div class="py-2 sticky-top">
            <div class="nav flex-column">
                <a href="" class="nav-link">Sidebar</a>
                <a href="" class="nav-link">Link</a>
                <a href="" class="nav-link">Link</a>
                <a href="" class="nav-link">Link</a>
                <a href="" class="nav-link">Link</a>
                <a href="" class="nav-link">Link</a>
            </div>
        </div>
    </div>
    <div class="col" id="main">
        <h1>Main Area</h1>
        <p>Main content.</p>
    </div>
 </div>
</div>

As you can see from this codeply I already organized the div structure into two blocks:

How can I make the sidebar available in the div collapsible?

Thanks in advance for any help.

Answer 1

您可以将其包装在具有ID以及类navbar-collapse和collapse的div中。然后，您可以添加一个切换器：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
  <div class="nav flex-column">
    <a href="" class="nav-link">Sidebar</a>
    <a href="" class="nav-link">Link</a>
    <a href="" class="nav-link">Link</a>
    <a href="" class="nav-link">Link</a>
    <a href="" class="nav-link">Link</a>
    <a href="" class="nav-link">Link</a>
  </div>
</div>

Example Bootply

More information on the navbar and classes

每个评论的更新

要将侧边栏切换到侧面，您可能需要添加一些javascript并设置最大宽度的动画：

$('.navbar-toggler').on('click', function(e) {
  e.preventDefault();
  var target = $(this).data('target');
  $(target).toggleClass('hide') ;
});

@import url("//maxcdn.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css");
/* CSS used here will be applied after bootstrap.css */
#sticky-sidebar {
  min-height: 100vh;
  transition: max-width 1s;
  overflow:hidden;
}
#sticky-sidebar.hide {
  max-width:0;
  padding:0 !important;
}
.navbar-toggler {
  background-color: #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-3 px-1 bg-dark" id="sticky-sidebar">
      <div class="py-2 sticky-top">
          <div class="nav flex-column">
            <a href="" class="nav-link">Sidebar</a>
            <a href="" class="nav-link">Link</a>
            <a href="" class="nav-link">Link</a>
            <a href="" class="nav-link">Link</a>
            <a href="" class="nav-link">Link</a>
            <a href="" class="nav-link">Link</a>
          </div>
        </div>
    </div>
    <div class="col" id="main">
      
        <button class="navbar-toggler" type="button" data-target="#sticky-sidebar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <h1>Main Area</h1>
      <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>

      <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>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>
    </div>
  </div>
</div>

How to create collapsible sidebar in the same div?

1 个答案: