Bootstrap侧柱-滑出模态

问题描述 投票：-1回答：1

我确定这个问题已经被回答过，但是我没有找到。

我有一个相当简单的Bootstrap问题（希望如此）。我有一个标准站点，其顶部导航和下面的2列（在容器中，而不是容器流体中）。左侧列用于过滤右侧/主列上的内容（例如，按城市过滤行，按日期过滤行等）。

但是，在移动设备上，我需要左侧的过滤器列滑出（类似于导航栏）。我也看到模型做得很好。 Example

我只是不知道如何制作它，所以它总是显示在大屏幕上，但是却充当由小屏幕上的按钮触发的滑出模式。我开始的Here's a codepen ...

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<body>

  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <main role="main" class="container mt-5 ">

    <div class="row">
      <div class="d-none d-lg-block col-lg-3">
        <h4>Side Navigation/Filters</h4>
        <ul>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>

        </ul>
      </div>
      <div class="col-12 col-lg-9">
        <button type="button" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#sideSlidoutModal">
          Show Side/Filter Nav (mobile only)
        </button>

        <h2>Main Content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere risus non ante ullamcorper cursus vel et est. Suspendisse eros eros, tristique ut sapien at, vulputate tincidunt orci. Donec pharetra, augue eu lobortis pellentesque, est
          nunc malesuada libero, sed imperdiet massa velit vel arcu. Mauris lobortis nibh nec dolor maximus, a mollis erat ullamcorper. Nam odio nisi, ultricies in euismod ut, dapibus in nisl. Phasellus imperdiet, nulla non eleifend ultricies, libero
          enim sollicitudin erat, nec mollis odio ipsum tristique massa. Aliquam nec tortor dictum, egestas lectus a, accumsan augue.
        </p>
        <p>Phasellus imperdiet, nulla non eleifend ultricies, libero enim sollicitudin erat, nec mollis odio ipsum tristique massa. Aliquam nec tortor dictum, egestas lectus a, accumsan augue.
        </p>

      </div>
    </div>

  </main>
  <!-- /.container -->

</body>

</html>

我确定我正在使它变得比原来要难得多。预先感谢您的任何建议！

twitter-bootstrap bootstrap-4 bootstrap-modal
1个回答
0
投票

我了解您的问题，并尝试通过一些自定义解决，因为通过使用自定义，您可以轻松管理所需的任何结构。

$('.open_sidemenu_button').click(function(e){
  $('.mobile_side_nav').toggleClass('menu_open');
  $('body').toggleClass('back_drop');
  e.stopPropagation();
});
$('.mobile_side_nav').click(function(e){
  e.stopPropagation();
});
$('body').click(function(){
  $('.mobile_side_nav').removeClass('menu_open');
  $('body').removeClass('back_drop');
});
@media (max-width: 991px){
  .main_page .container{
    position: relative;
  }
  .main_page .mobile_side_nav{
    position: fixed;
    top: 0;
    bottom: 0;
    left: -300px;
    -ms-flex: 0 0 300px;
    flex: 0 0 300px;
    max-width: 300px;
    min-width: 300px;
    background-color: #fff;
    box-shadow: 0px 0px 5px #000;
    transition: all 0.5s;
    z-index: 999;
    padding: 15px;
  }
  .main_page .mobile_side_nav.menu_open{
    left: 0;
  }
  body.back_drop:before {
    content: "";
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;
  }
}
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <div class="main_page">
    <div class="container pt-5">
      <div class="row">
        <div class="mobile_side_nav col-lg-3">
          <button type="button" class="open_sidemenu_button d-block d-lg-none btn btn-xs btn-danger ml-auto">X</button>
          <h5>Side Navigation/Filters</h5>
          <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
          </ul>
        </div>
        <div class="col-12 col-lg-9">
          <button type="button" class="open_sidemenu_button d-block d-lg-none btn btn-xs btn-primary">Show Side/Filter Nav (mobile only)</button>
          <h2>Main Content</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere risus non ante ullamcorper cursus vel et est. Suspendisse eros eros, tristique ut sapien at, vulputate tincidunt orci. Donec pharetra, augue eu lobortis pellentesque, est
    nunc malesuada libero, sed imperdiet massa velit vel arcu. Mauris lobortis nibh nec dolor maximus, a mollis erat ullamcorper. Nam odio nisi, ultricies in euismod ut, dapibus in nisl. Phasellus imperdiet, nulla non eleifend ultricies, libero
    enim sollicitudin erat, nec mollis odio ipsum tristique massa. Aliquam nec tortor dictum, egestas lectus a, accumsan augue.
          </p>
          <p>Phasellus imperdiet, nulla non eleifend ultricies, libero enim sollicitudin erat, nec mollis odio ipsum tristique massa. Aliquam nec tortor dictum, egestas lectus a, accumsan augue.
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

我希望这段代码将帮助您制定解决方案，并在将来对您有所帮助。

谢谢...

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.