Question

我正在寻求帮助，或有关如何解决我的问题的提示。我创建了应用程序框架-这是带有页眉，主视图和页脚的视图-简单。我使用flex，一切都很好，直到我减小了手机屏幕的尺寸-菜单不起作用（按钮colspan）。

Answer 1

如下所示，在您的代码中正确使用所有链接，因为您错过了jquery和bootstrap js链接。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<html class="m-0 h-100 min-h-100">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>JSP Page</title>
      <link rel="stylesheet" href="/atende/script/bootstrap-4.3/css/bootstrap.min.css" type="text/css">
      <link rel="stylesheet" href="/atende/script/font-awesome/css/font-awesome.min.css" type="text/css">
      <link rel="stylesheet" href="/atende/style/main_b.css" type="text/css">
   </head>
   <body class="m-0 h-100 min-h-100 d-flex flex-column">
      <header class="flex-1">
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark py-0">
            <a class="navbar-brand " href="">Intranet</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainMenu" aria-controls="mainMenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="mainMenu">
               <ul class=" navbar-nav mr-auto" >
                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="dropdownKontrahenci" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     Kontrahenci
                     </a>
                     <div class="dropdown-menu" aria-labelledby="dropdownKontrahenci">
                        <a class="dropdown-item" href="/atende/kontrahent/kontrahenci.jsp" title="Lista kontrahentów">Lista</a>
                        <a class="dropdown-item" href="/atende/kontrahent/kontrahenci_kontakty.jsp">Kontakty</a>
                     </div>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="/atende/projekt/wyszukiwanie.jsp"id="nav-project" role="button" aria-haspopup="true" aria-expanded="false">
                     Projekty
                     </a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="/atende/projekt/zlecenie/wyszukiwanie_controller.jsp" id="nav-task" role="button"  aria-haspopup="true" aria-expanded="false">
                     Zlecenia
                     </a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="/atende/faktury/" id="nav-invoice" role="button" aria-haspopup="true" aria-expanded="false">
                     Faktury
                     </a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="/atende/uslugi_serw/lista_uslug.jsp" id="nav-service" role="button" aria-haspopup="true" aria-expanded="false">
                     Usługi
                     </a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="/atende/projekt/dok_wyszukiwanie.jsp" id="nav-doks" role="button" aria-haspopup="true" aria-expanded="false">
                     Dokumenty
                     </a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="/atende/mvc/panel_pracownika/index" id="nav-panel" role="button" aria-haspopup="true" aria-expanded="false">
                     Panel
                     </a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="/atende/notatki/notatki_lista_ogolna.jsp?chbx_moje=T&chbx_todo=T" id="nav-note" role="button" aria-haspopup="true" aria-expanded="false">
                     Notatki
                     </a>
                  </li>
                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="devEdit" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     <i class="fa fa-edit"></i>
                     </a>
                     <div class="dropdown-menu" aria-labelledby="devEdit">
                        <a class="dropdown-item" title="Lista akcji" href="/atende/log.jsp" title="Lista debagow">[DEBS]</a>
                        <a class="dropdown-item" title="Tryb debagowania" href="/atende/afwe/execute.jsp?exeProcId=szop.tryb_debug_switch">
                        [DEB_ON]
                        </a>
                        <a class="dropdown-item" title="Tryb developerski" href="/atende/afwe/execute.jsp?exeProcId=szop.tryb_developer_switch">
                        [DEV_ON]
                        </a>
                     </div>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link pl-0" href="#" id="nav-db-info" style="color: red; cursor: text">
                     &nbsp;BAZA TESTOWA!!&nbsp;
                     </a>
                  </li>
               </ul>
               <div class="nav-item pull-right-md">
                  <a class="nav-link pl-0" style="color: rgba(255,255,255); cursor: text" href="#">Krzak S.A.</a>
               </div>
               <div class="nav-item pull-right-md">
                  <a class="nav-link pl-0" style="color: rgba(255,255,255); cursor: text" href="#">Kowalski Jacek (jkowal)</a>
               </div>
               <div class = "nav-item pull-right">
                  <a class="nav-link " style="color: rgba(255,255,255);" href="/sso/auth?action=logout" title="Wyloguj"><i class="fa fa-sign-out"></i></a>
               </div>
            </div>
         </nav>
      </header>
      <article class="flex-8 bg-light overflow-auto">
         llanfskla alnfk nkasfklnasflna klnsfnklnas klnkasasl akifnlgnia gfjiknjaoligkjnalki asgkinjalsgnjije gpqijegpoqjew p gajakigj mmgflnjllanfskla alnfk nkasfklnasflna klnsfnklnas klnkasasl akifnlgnia gfjiknjaoligkjnalki asgkinjalsgnjije gpqijegpoqjew p gajakigj mmgflnjllanfskla alnfk nkasfklnasflna klnsfnklnas klnkasasl akifnlgnia gfjiknjaoligkjnalki asgkinjalsgnjije gpqijegpoqjew p gajakigj mmgflnjllanfskla alnfk nkasfklnasflna klnsfnklnas klnkasasl akifnlgnia gfjiknjaoligkjnalki asgkinjalsgnjije gpqijegpoqjew p gajakigj mmgflnj
         llanfskla alnfk nkasfklnasflna klnsfnklnas klnkasasl akifnlgnia gfjiknjaoligkjnalki asgkinjalsgnjije gpqijegpoqjew p gajakigj mmgflnjllanfskla alnfk nkasfklnasflna klnsfnklnas klnkasasl akifnlgnia gfjiknjaoligkjnalki asgkinjalsgnjije gpqijegpoqjew p gajakigj mmgflnjllanfskla alnfk nkasfklnasflna klnsfnklnas klnkasasl akifnlgnia gfjiknjaoligkjnalki asgkinjalsgnjije gpqijegpoqjew p gajakigj mmgflnjllanfskla alnfk nkasfklnasflna klnsfnklnas klnkasasl akifnlgnia gfjiknjaoligkjnalki asgkinjalsgnjije gpqijegpoqjew p gajakigj mmgflnj
      </article>
      <footer class="flex-1 bg-dark">footer</footer>
   </body>
</html>

Answer 2

您只需要添加引导所需的js文件：

在关闭正文标签之前：“”，

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

或提及您的bootstrap的js本地文件。祝你有美好的一天

Flexbox和恒定高度

2 个答案: