Я не могу понять, почему мой сайт не реагирует

Я попытался создать веб-сайт, отражающий сайт Flipboard сетью Bootstrap; однако мой сайт не реагирует, и я не могу понять, почему. Я добавил навигационную роль в меню, потому что я хотел, чтобы она оставалась наверху, когда вы прокручиваете вниз (по крайней мере, это был вариант, который лучше всего работал для меня). Когда я загружаю его на 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' на' .container'. http://getbootstrap.com/2.3.2/scaffolding.html#layouts – gearsdigital

Это width: 960px; вы добавили к container класса в вашем CSS

попробуйте удалить стиль на container

если вы собираетесь на gri d, который охватывает ширину экрана, вы также можете попробовать изменить класс div контейнера, чтобы использовать <div class="container-fluid">, используя встроенный контейнер сетки Bootstrap, чтобы он реагировал в обратном порядке.

источник

2015-09-02 14:24:54 Kiz

Я не могу понять, почему мой сайт не реагирует

ответ

Смежные вопросы