Question

我正在使用B-4.0.0这是非常恼人的我使用了几乎所有在文档中使用的类但文本无法在右下角对齐这是非常恼人的请如果有人有这些重排类的解决方案给我这个让我很困惑的清单

＆＃13;

   <!DOCTYPE html>
    <html lang="">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <title>Hipstrify.io</title>
        
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        
    </head>
    
    <body>
       <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-default ">
       
       <div id="container"> 
       <div class="navbar-header">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
           
        <span class="sr-only">Toggle navigation</span><span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
          
          <span class="icon-bar"></span>
          
          <span class="icon-bar"></span>
           </button> 
           
          <a class="navbar-brand" href="index.html">HIpstrify.io</a>
          
           
           
       </div>
       
       <div class="collapse  navbar-collapse " id="navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="active "> <a href="">Home</a></li>
            
            <li> <a href="">About</a></li>
            
            <li> <a href="">Our Team</a></li>
            <li> <a href="">Contact</a></li>
            
            
        </ul>
           </div>
           
       </div>
       
       
    
    
         </nav>
      
       <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>
       </body>   
          
    </html>

＆＃13;

Answer 1

您使用id="container"的代码段中首先需要class="container"

然后我添加了css position:absolute 到navbar-brand

它总是会right top，因为容器是relative

   <!DOCTYPE html>
    <html lang="">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <title>Hipstrify.io</title>
        
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
          .navbar-brand {
            position:absolute;
            right:0;
            top:0;
          }
        </style>
    </head>
    
    <body>
       <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-default ">
       
       <div class="container"> 
       <div class="navbar-header">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
           
        <span class="sr-only">Toggle navigation</span><span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
          
          <span class="icon-bar"></span>
          
          <span class="icon-bar"></span>
           </button> 
           
          <a class="navbar-brand" href="index.html">HIpstrify.io</a>
          
           
           
       </div>
       
       <div class="collapse  navbar-collapse " id="navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="active "> <a href="">Home</a></li>
            
            <li> <a href="">About</a></li>
            
            <li> <a href="">Our Team</a></li>
            <li> <a href="">Contact</a></li>
            
            
        </ul>
           </div>
           
       </div>
       
       
    
    
         </nav>
      
       <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>
       </body>   
          
    </html>

Bootstrap-4.0.0如何在右上角对齐li

1 个答案: