Bootstrap HTML頁面向左延伸超出屏幕

我正在用Bootstrap構建個人網站，但遇到了無法找到解決方案的問題。我看過各種教程，只是簡單網頁的基本框架。但是，頁面的左端似乎超出了屏幕的左邊緣，並且將滾動條向右移動，使頁面超出了jumbotron標題的邊緣。Bootstrap HTML頁面向左延伸超出屏幕

如何將頁面居中在屏幕上？

這裏是我的完整代碼：

<!DOCTYPE html> 
<html> 

    <head> 
     <title>My Name</title> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
       rel="stylesheet"> 
    </head> 

    <body> 
     <div class="jumbotron text-center"> 
      <h1>My Name</h1> 
     </div> 

     <div class="row"> 
      <h2>What I've Been Up To</h2> 
     </div> 

    </body> 

    <footer> 
     <p> Copyright &copy; 
     <!--Script displays the current year--> 
     <script type="text/javascript"> 
      var d = new Date() 
      document.write(d.getFullYear()) 
     </script> 
     </p> 
    </footer> 

</html>

Screenshot of HTML Page

來源

2017-05-25 bavenafu

當使用自舉的網格系統，您的內容應該是在這兩個row歸類申報單，然後col-xx-xx歸類申報單。行的邊上有一個-15px的邊距，這就是爲什麼你的內容被推出容器。這是爲了補償col類的15px頁邊距，用於在一行中的多個列之間進行填充。這是它應該如何看：

<div class="row"> 
    <div class="col-md-12> 
     <h2>What I've Been Up To</h2> 
    </div> 
</div>

注col-md-12應改爲你在任何情況下要在屏幕大小和列寬相應的類。

查看網格系統的文檔以獲取所有酷炫功能。 https://v4-alpha.getbootstrap.com/layout/grid/

來源

2017-05-25 12:52:45 sn3ll

你在找這樣的事嗎？

https://jsfiddle.net/mergatroid/L2tLg3kj/

<div class="jumbotron text-center"> 
    <h1>Jumbotron Area</h1> 
    <p>Area for a call to action or tagline...</p> 
</div> 

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-3"> 
     <div class="box"> 
     <h3>Column 3</h3> 
     <p>Lorem ipsum dolor..</p> 
     <p>Ut enim ad..</p> 
     </div> 
    </div> 
    <div class="col-sm-3"> 
     <div class="box"> 
     <h3>Column 3</h3> 
     <p>Lorem ipsum dolor..</p> 
     <p>Ut enim ad..</p> 
     </div> 
    </div> 
    <div class="col-sm-3"> 
     <div class="box"> 
     <h3>Column 3</h3> 
     <p>Lorem ipsum dolor..</p> 
     <p>Ut enim ad..</p> 
     </div> 
    </div> 
    <div class="col-sm-3"> 
     <div class="box"> 
     <h3>Column 3</h3> 
     <p>Lorem ipsum dolor..</p> 
     <p>Ut enim ad..</p> 
     </div> 
    </div> 
    </div> 
</div>

來源

2017-05-25 13:17:32 MergatroidSA

Bootstrap HTML頁面向左延伸超出屏幕

回答

相關問題