Как добавить разбиение на страницы с collapse в bootstrap

Может ли кто-нибудь сказать мне, как сделать коллапс с пагинацией

Вот ссылка ссылка, которую я не могу понять, пожалуйста, кто-то опишите меня или реализовал его и отправьте мне исходный код

2 это происходит worng как это

1 ответ

  1. Приведу для этого пример. Попробуйте использовать его.

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <title>Bootstrap Case</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    
    <body>
    
      <nav id="menu" class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span> 
            </button>
          </div>
          <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a>
              </li>
              <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Page 1-1</a>
                  </li>
                  <li><a href="#">Page 1-2</a>
                  </li>
                  <li><a href="#">Page 1-3</a>
                  </li>
                </ul>
              </li>
              <li><a href="#">Page 2</a>
              </li>
              <li><a href="#">Page 3</a>
              </li>
            </ul>        
          </div>
        </div>
      </nav>
      
      
    </body>
    </html>

    И это размер экрана изменения когда он свернет:

    @media (min-width: 768px) and (max-width: 991px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
    }