简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Bootstrap 登陆页面布局问题 - 容器无法正确适应屏幕尺寸
P粉214089349
P粉214089349 2023-09-10 21:04:02
0
2
483

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

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

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

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

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

<!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>

  <!-- Title -->
  <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>

  <!-- Features -->
  <section id="features">
    <div class="row g-4 py-5 row-cols-1 row-cols-lg-3 px-4">
      
      <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>

  <!-- Testimonial -->
  <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>

  <!-- Pricing -->
  <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">rrreee<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"><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"><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>

  <!-- Footer -->
  <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>

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

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

提前致谢！！

P粉214089349
P粉214089349

全部回复(1)
P粉186897465
P粉1868974652023-09-11 17:55:06 1 楼

检查容器的位置。在代码片段中，您将容器类与 col-xxl-8 类一起使用。确保容器包裹了要居中的整个内容，并且正确应用了 col-xxl-8 类。

并且认为您应该像这样检查功能部分的所有容器类

col-12 col-sm-8 col-lg-6 用于图像容器，col-lg-6 用于文本容器。
点赞 +0
添加回复
P粉176151589
P粉1761515892023-09-11 12:09:49 0 楼

出现水平滚动条是因为功能部分溢出了正文超过 100%。添加Bootstrap类mw-100，相当于在CSS中设置max-width: 100%;。

请参阅下面的代码片段。





  
  
  TinDog
  
  






  
  


    

      


        

          Dog on a smartphone
        


        

          
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."

        dog image
        
Pebbles, New York


        

          

            

              TechCrunch
            


            

              Mashable
            


            

              Business Insider
            


            

              TNW
            

          

        


      

    

  


  
  

    

      

        

          
A Plan for Every Dog's Needs

          
Simple and affordable price plans for you and your dog.

        

      


      

        


          

            

              

                
Chihuahua

              

              

                
rrreee/mo

                
    
                  
  • 5 Matches Per Day
    • 
                  
  • 10 Messages Per Day
    • 
                  
  • Unlimited App Usage
    • 
                

                
              

            

          


          

            

              

                
Labrador

              

              

                
/mo

                
    
                  
  • Unlimited Matches
    • 
                  
  • Unlimited Messages
    • 
                  
  • Unlimited App Usage
    • 
                

                
              

            

          


          

            

              

                
Mastiff

              

              

                
/mo

                
    
                  
  • Pirority Listing
    • 
                  
  • Unlimited Matches & Messages
    • 
                  
  • Unlimited App Usage
    •
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！