我找不出爲什麼我的網站沒有響應

我試圖創建一個網站與Bootstrap網格鏡像Flipboard網站;然而，我的網站沒有反應，我不明白爲什麼。我在菜單中添加了一個導航角色，因爲我希望它在向下滾動時保持在頂部（至少，這是最適合我的選項）。當我在iPhone上加載它時，屏幕會向右滾動很遠，我不知道爲什麼。任何幫助將不勝感激。我找不出爲什麼我的網站沒有響應

下面是HTML：

<!doctype html> 
<html lang="en"> 
<html> 
    <head> 
    <meta charset="utf-8"/> 
     <meta content="initial-scale=1.0" name="viewport"> 
     <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'> 
      <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet"> 
      <link href="test.css" rel="stylesheet"> 
      <title>Test Responsive Website</title> 
    </head> 
    <body> 
    <div class="header"> 
     <nav role="navigation" class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <p><a href="#">Lorem</a></p> 
     <ul class="menu"> 
      <li><a href="#">Ipsum</a></li> 
      <li><a href="#">Dolor</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle">Sit Amet<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Consectetur</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
    </nav> 
    </div> 


    <div class="container"> 
      <div class="row"> 
      <div class="about col-xs-5"> 
       <h1>Lorem Ipsum</h1> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      </div> 
      </div> 
     </div> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="app.js"></script> 
    </body> 
    </html>

這裏是CSS：

/* General */ 

.container { 
    width: 960px; 
} 

/* Header */ 

.header .navbar { 
    background-color: rgba(255, 255, 255, 0.95); 
    border-bottom: 1px solid #ddd; 

    font-family: 'Oswald', sans-serif; 
    font-weight: 300; 
    color: #898989; 

    font-size: 17px; 
    padding: 15px; 
} 

.header p { 
    float: left; 
    display: inline; 
    list-style: none; 
    margin-top: 5px; 

    color: #898989; 
} 

.header a { 
    color: #898989; 
} 

.header a:hover { 
    color: #363636 ; 
} 
/* Menu */ 

.header .menu { 
    float: left; 
    list-style: none; 
    margin-top: 5px; 
} 

.menu > li { 
    display: inline; 
    padding-left: 20px; 
    padding-right: 20px; 
} 

.menu a { 
    color: #898989; 
} 

/* Dropdown */ 

.dropdown-menu { 
    font-size: 16px; 
    margin-top: 5px; 
    min-width: 105px; 
} 

.dropdown-menu li a { 
    color: #898989; 
    padding: 6px 20px; 
    font-weight: 300; 
} 

/* Main */ 

.about h1 { 
    color: #363636; 

    font-family: 'Oswald', sans-serif; 
    font-weight: 400; 

    font-size: 40px; 
    margin-top: 105px; 
    margin-bottom: 0px; 
} 

.about p { 
    color: #959595; 
    font-family: Georgia, "Times New Roman", serif; 
    font-size: 1.15em; 
    line-height: 1.75em; 
    margin-bottom: 15px; 
    margin-top: 15px; 
}

來源

2015-09-02 Ashley_L

你設置一個固定的寬度'960px' on' .container'。 http://getbootstrap.com/2.3.2/scaffolding.html#layouts – gearsdigital

這是width: 960px;您已經添加到container類在你的CSS

嘗試刪除造型在container

如果你要去抓d容器跨越屏幕的寬度，你也可以嘗試改變你的容器div類使用 <div class="container-fluid">利用Bootstrap的內置網格容器，使其行爲以響應的方式

來源

2015-09-02 14:24:54 Kiz

我找不出爲什麼我的網站沒有響應

回答

相關問題