Bootstrap Navbar崩溃无法正常运行angular6

Question

我是从引导站点复制的。但我不知道我不起作用。你能帮我为什么吗。我试图修复它几个小时。我想像菜单按钮一样，下拉菜单也无法正常工作。我将引导程序文件复制到我的项目文件夹中，并使用代码作为html文件的开头来执行这些操作。任何帮助将不胜感激。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
   
    
    
   
    <div class= "container" >

       <div class="pos-f-t" style="width: 202px">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4" style="width: 202px">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>
       <div class="border bg-danger border-dark" style="height:2cm; width : 5.35cm; margin-bottom: -2px;font-weight: bold ">
        <div class = "row" style="padding-left: 0.4cm" >            
            <p style="font-size: 20px">{{y}}</p>
            <p style="font-size: 10px">{{z}}</p>
        </div> 
        <div class ="row" style="padding-left: 0.4cm">               
            <p style="font-size: 20px;  ">{{x}}</p> 
            <p style="font-size: 20px; ">{{contr}}</p>  
            <p style="font-size: 20px; margin-top: 0.7cm;">{{sum}}</p>           
    </div>          
     </div>
      <div class ="border bg-black border-danger" style="width: 5.3cm;">              
      <div class ="row" style="padding-left: 0.4cm">
        <div class="col-xs">
          <div class="btn-group" aria-label="Justified button group">
              <input  type ="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="getPast()" value="M" > 
              <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="makeDivided()" value="⅟x">
              <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="root()" value="√">
              <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="square()"  value="a²">
          </div>          
        </div>             
      </div>
      <div class="row" style="padding-left: 0.4cm">
          <div class="col-xs">
            <div class="btn-group">
                <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="clear()" value="CE"> 
                <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="clearAll()" value="C">
                <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0"  (click)="delete()" value="←">
                <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0"  (click)="division()" value="/"> 
            </div>          
          </div>
        </div>
      <div class ="row" style="padding-left: 0.4cm">
        <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
            <div class = "col-xs">
                <div class="btn-group">
                    <button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('1')"> 1 </button>
                    <button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('2')"> 2 </button> 
                    <button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('3')"> 3 </button> 
                    <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="add()"  value="+" >
                  </div>            
              </div>
        </div>  
      </div>
      <div class = "row" style="padding-left: 0.4cm">
        <div class = "btn-group btn-group-justified" role="group">
            <div class = "col-xs">
                <div class="btn-group">
                    <button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0"  (click)="getValue('4')"> 4 </button>
                    <button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0"  (click)="getValue('5')"> 5 </button>
                    <button  type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('6')"> 6 </button>
                    <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="substract()"  value="-">
                  </div>              
              </div>
        </div>    
      </div>
      <div class = "row" style="padding-left: 0.4cm">
        <div class="btn-group" role="group">
            <div class = "col-xs">
                <div class="btn-group">
                    <button  type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('7')"> 7 </button>
                    <button  type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0 " (click)="getValue('8')"> 8 </button>
                    <button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('9')"> 9 </button>
                    <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="multiple()" value="*">
                  </div>            
              </div>
        </div> 
      </div>
      <div class = "row" style="padding-left: 0.4cm">
        <div class="col-xs">
            <div class="btn-group">
                <input  type="button" class="btn btn-dark border border-danger rounded-0 border-top-0" (click)="changeMark()" value="∓">  
                <button  class="btn btn-danger border border-danger rounded-0 border-top-0" (click)="getValue('0')">0</button> 
                <button class="btn btn-dark border border-danger rounded-0 border-top-0" (click)="addKama()" >,</button>
                <input  class="btn btn-dark border border-danger rounded-0 border-top-0" type="button" (click)="total()" value="=">
              </div>        
        </div>
      </div>     
    </div>    
  </div>
 
      
   
   
    
    
    
    
    
    
    
    
    
    
    
      
     
    
     
    
    


        
        
    
    
    
   
    

Answer 1

您只需要包含jquery cdn即可使其正常工作

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-3.3.1.slim.js"
  integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
  crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
   
    
    
   
    <div class= "container" >

       <div class="pos-f-t" style="width: 202px">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4" style="width: 202px">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>
       <div class="border bg-danger border-dark" style="height:2cm; width : 5.35cm; margin-bottom: -2px;font-weight: bold ">
        <div class = "row" style="padding-left: 0.4cm" >            
            <p style="font-size: 20px">{{y}}</p>
            <p style="font-size: 10px">{{z}}</p>
        </div> 
        <div class ="row" style="padding-left: 0.4cm">               
            <p style="font-size: 20px;  ">{{x}}</p> 
            <p style="font-size: 20px; ">{{contr}}</p>  
            <p style="font-size: 20px; margin-top: 0.7cm;">{{sum}}</p>           
    </div>          
     </div>
      <div class ="border bg-black border-danger" style="width: 5.3cm;">              
      <div class ="row" style="padding-left: 0.4cm">
        <div class="col-xs">
          <div class="btn-group" aria-label="Justified button group">
              <input  type ="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="getPast()" value="M" > 
              <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="makeDivided()" value="⅟x">
              <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="root()" value="√">
              <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="square()"  value="a²">
          </div>          
        </div>             
      </div>
      <div class="row" style="padding-left: 0.4cm">
          <div class="col-xs">
            <div class="btn-group">
                <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="clear()" value="CE"> 
                <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="clearAll()" value="C">
                <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0"  (click)="delete()" value="←">
                <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0"  (click)="division()" value="/"> 
            </div>          
          </div>
        </div>
      <div class ="row" style="padding-left: 0.4cm">
        <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
            <div class = "col-xs">
                <div class="btn-group">
                    <button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('1')"> 1 </button>
                    <button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('2')"> 2 </button> 
                    <button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('3')"> 3 </button> 
                    <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="add()"  value="+" >
                  </div>            
              </div>
        </div>  
      </div>
      <div class = "row" style="padding-left: 0.4cm">
        <div class = "btn-group btn-group-justified" role="group">
            <div class = "col-xs">
                <div class="btn-group">
                    <button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0"  (click)="getValue('4')"> 4 </button>
                    <button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0"  (click)="getValue('5')"> 5 </button>
                    <button  type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('6')"> 6 </button>
                    <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="substract()"  value="-">
                  </div>              
              </div>
        </div>    
      </div>
      <div class = "row" style="padding-left: 0.4cm">
        <div class="btn-group" role="group">
            <div class = "col-xs">
                <div class="btn-group">
                    <button  type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('7')"> 7 </button>
                    <button  type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0 " (click)="getValue('8')"> 8 </button>
                    <button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('9')"> 9 </button>
                    <input  type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="multiple()" value="*">
                  </div>            
              </div>
        </div> 
      </div>
      <div class = "row" style="padding-left: 0.4cm">
        <div class="col-xs">
            <div class="btn-group">
                <input  type="button" class="btn btn-dark border border-danger rounded-0 border-top-0" (click)="changeMark()" value="∓">  
                <button  class="btn btn-danger border border-danger rounded-0 border-top-0" (click)="getValue('0')">0</button> 
                <button class="btn btn-dark border border-danger rounded-0 border-top-0" (click)="addKama()" >,</button>
                <input  class="btn btn-dark border border-danger rounded-0 border-top-0" type="button" (click)="total()" value="=">
              </div>        
        </div>
      </div>     
    </div>    
  </div>