Bootstrap 登陆页面布局问题 - 容器无法正确适应屏幕尺寸-PHP中文网问答

我目前正在使用 Bootstrap 创建登陆页面进行练习。但是，我面临布局问题，容器不适合适当的屏幕尺寸。左右两侧不平衡，导致屏幕向左侧倾斜。

这是说明问题的屏幕截图（链接）：文本

我尝试了各种方法，但未能解决问题。我怀疑这可能是 Bootstrap 中网格系统或容器设置的问题。

有人可以指导我如何排查和修复此布局问题吗？任何建议或见解将不胜感激。

此外，以下是一些相关的代码片段：





  
  
  TinDog
  
  




  
  

    
      
        
        
          
        
        
        
          Meet new and interesting dogs nearby.
          
          
            
            
            
            

          
        

      
    

  

  
  
    
      
      
        
          
        
        
          Featured title
          Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
        
      
      
      
        
          
        
        
          Featured title
          Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
        
      
      
      
        
          
        
        
          Featured title
          Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.
        
      
    
  

  
  
    
      
        "I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof."
        
        Pebbles, New York
        
        
          
            
              
            

            
              
            

            
              
            

            
              
            
          
        
      
      
    
  

  
  
    
      
        
          A Plan for Every Dog's Needs
          Simple and affordable price plans for you and your dog.
        
      
    
      
        
          
          
            
              
                Chihuahua
              
              
                $0/mo
                
                  5 Matches Per Day
                  10 Messages Per Day
                  Unlimited App Usage
                
                
              
            
          

          
            
              
                Labrador
              
              
                $15/mo
                
                  Unlimited Matches
                  Unlimited Messages
                  Unlimited App Usage
                
                
              
            
          
          
          
            
              
                Mastiff
              
              
                $29/mo
                
                  Pirority Listing
                  Unlimited Matches & Messages
                  Unlimited App Usage
                
                
              
            
          
        
      
    
  

  
  
    
      
        
        
          
            
          
          © TinDog
        
    
        
        
    
        
          Section
          
            Home
            Features
            Pricing
            FAQs
            About
          
        
    
        
          Section
          
            Home
            Features
            Pricing
            FAQs
            About
          
        
    
        
          Section
          
            Home
            Features
            Pricing
            FAQs
            About

我也检查了容器语法、边距和填充。但我实在不明白这有什么问题..

我真的很感谢你的帮助，这对我这个新手有很大帮助。

提前致谢！！

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TinDog</title> <link href="./css/style.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> </head> <body>  <section id="title" class="gradient-background"> <div class="container col-xxl-8 pt-5"> <div class="row flex-lg-row-reverse align-items-center"> <div class="col-12 col-sm-8 col-lg-6"> <img src="./images/iphone.png" class="header-img d-block mx-auto img-fluid" alt="Dog on a smartphone" height="200" loading="lazy"> </div> <div class="col-lg-6"> <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3 pt-5 pb-3">Meet new and interesting dogs nearby.</h1> <div class="d-grid gap-2 d-md-flex justify-content-md-start pb-5"> <button type="button" class="btn btn-light btn-lg px-4 me-md-2"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-apple mb-1" viewBox="0 0 16 16"> <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z" /> <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z" /> </svg> Download </button> <button type="button" class="btn btn-outline-light btn-lg px-4"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-google-play mb-1" viewBox="0 0 16 16"> <path d="M14.222 9.374c1.037-.61 1.037-2.137 0-2.748L11.528 5.04 8.32 8l3.207 2.96 2.694-1.586Zm-3.595 2.116L7.583 8.68 1.03 14.73c.201 1.029 1.36 1.61 2.303 1.055l7.294-4.295ZM1 13.396V2.603L6.846 8 1 13.396ZM1.03 1.27l6.553 6.05 3.044-2.81L3.333.215C2.39-.341 1.231.24 1.03 1.27Z" /> </svg> Download </button> </div> </div> </div> </div> </section>  <section id="features"> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3 px-4 mw-100"> <div class="col d-flex align-items-start py-4"> <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-check2-circle" viewBox="0 0 16 16"> <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z" /> <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z" /> </svg> </div> <div> <h3 class="fs-2 text-body-emphasis">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> </div> </div> <div class="col d-flex align-items-start py-4"> <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-mortarboard" viewBox="0 0 16 16"> <path d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5ZM8 8.46 1.758 5.965 8 3.052l6.242 2.913L8 8.46Z" /> <path d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Zm-.068 1.873.22-.748 3.496 1.311a.5.5 0 0 0 .352 0l3.496-1.311.22.748L8 12.46l-3.892-1.556Z" /> </svg> </div> <div> <h3 class="fs-2 text-body-emphasis">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> </div> </div> <div class="col d-flex align-items-start py-4"> <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <svg xmlns="http://www.w3.org/2000/svg" height="30" fill="currentColor" class="bi bi-arrow-through-heart" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M2.854 15.854A.5.5 0 0 1 2 15.5V14H.5a.5.5 0 0 1-.354-.854l1.5-1.5A.5.5 0 0 1 2 11.5h1.793l.53-.53c-.771-.802-1.328-1.58-1.704-2.32-.798-1.575-.775-2.996-.213-4.092C3.426 2.565 6.18 1.809 8 3.233c1.25-.98 2.944-.928 4.212-.152L13.292 2 12.147.854A.5.5 0 0 1 12.5 0h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.854.354L14 2.707l-1.006 1.006c.236.248.44.531.6.845.562 1.096.585 2.517-.213 4.092-.793 1.563-2.395 3.288-5.105 5.08L8 13.912l-.276-.182a21.86 21.86 0 0 1-2.685-2.062l-.539.54V14a.5.5 0 0 1-.146.354l-1.5 1.5Zm2.893-4.894A20.419 20.419 0 0 0 8 12.71c2.456-1.666 3.827-3.207 4.489-4.512.679-1.34.607-2.42.215-3.185-.817-1.595-3.087-2.054-4.346-.761L8 4.62l-.358-.368c-1.259-1.293-3.53-.834-4.346.761-.392.766-.464 1.845.215 3.185.323.636.815 1.33 1.519 2.065l1.866-1.867a.5.5 0 1 1 .708.708L5.747 10.96Z" /> </svg> </div> <div> <h3 class="fs-2 text-body-emphasis">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> </div> </div> </div> </section>  <section id="testimonial"> <div class="mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5 d-flex flex-column align-items-center"> <h2 class="fs-2 text-center pt-4">"I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof."</h2> <img class="profile-img mt-5" src="./images/dog-img.jpg" alt="dog image"> <p class="mt-2 mx-auto">Pebbles, New York</p> <div class="container pt-5"> <div class="row"> <div class="col-lg-3 col-sm-12 d-flex flex-column align-items-center"> <img src="./images/techcrunch.png" alt="TechCrunch" height="30"> </div> <div class="col-lg-3 col-sm-12 d-flex flex-column align-items-center"> <img src="./images/mashable.png" alt="Mashable" height="30"> </div> <div class="col-lg-3 col-sm-12 d-flex flex-column align-items-center"> <img src="./images/bizinsider.png" alt="Business Insider" height="40"> </div> <div class="col-lg-3 col-sm-12 d-flex flex-column align-items-center"> <img src="./images/tnw.png" alt="TNW" height="38"> </div> </div> </div> </div> </div> </section>  <section id="pricing"> <div class="container py-3"> <header> <div class="pricing-header p-3 pb-md-4 mx-auto text-center"> <h2 class="display-4 fw-normal text-body-emphasis">A Plan for Every Dog's Needs</h2> <p class="fs-5 text-body-secondary">Simple and affordable price plans for you and your dog.</p> </div> </header> <main> <div class="row row-cols-1 row-cols-md-3 mb-3 text-center"> <div class="col"> <div class="card mb-4 rounded-3 shadow-sm"> <div class="card-header py-3"> <h3 class="my-0 fw-normal">Chihuahua</h3> </div> <div class="card-body"> <p class="card-title pricing-card-title fs-1">$0<small class="text-body-secondary fw-light">/mo</small></p> <ul class="list-unstyled mt-3 mb-4"> <li>5 Matches Per Day</li> <li>10 Messages Per Day</li> <li>Unlimited App Usage</li> </ul> <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button> </div> </div> </div> <div class="col"> <div class="card mb-4 rounded-3 shadow-sm"> <div class="card-header py-3"> <h3 class="my-0 fw-normal">Labrador</h3> </div> <div class="card-body"> <h1 class="card-title pricing-card-title">$15<small class="text-body-secondary fw-light">/mo</small></h1> <ul class="list-unstyled mt-3 mb-4"> <li>Unlimited Matches</li> <li>Unlimited Messages</li> <li>Unlimited App Usage</li> </ul> <button type="button" class="w-100 btn btn-lg btn-dark">Get started</button> </div> </div> </div> <div class="col"> <div class="card mb-4 rounded-3 shadow-sm border-primary"> <div class="card-header py-3 text-bg-dark border-primary"> <h3 class="my-0 fw-normal">Mastiff</h3> </div> <div class="card-body"> <h1 class="card-title pricing-card-title">$29<small class="text-body-secondary fw-light">/mo</small></h1> <ul class="list-unstyled mt-3 mb-4"> <li>Pirority Listing</li> <li>Unlimited Matches & Messages</li> <li>Unlimited App Usage</li> </ul> <button type="button" class="w-100 btn btn-lg btn-dark">Contact us</button> </div> </div> </div> </div> </main> </div> </section>  <section id="footer" class="gradient-background"> <div class="container"> <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-2 pt-4"> <div class="col mb-3"> <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none"> <svg class="bi me-2" width="40" height="32"> <use xlink:href="#bootstrap"></use> </svg> </a> <p class="text-body-secondary">© TinDog</p> </div> <div class="col mb-3"> </div> <div class="col mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li> </ul> </div> <div class="col mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li> </ul> </div> <div class="col mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li> </ul> </div> </footer> </div> </section> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> </body> </html>