Question

我尝试使用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;
}

Answer 1

您已添加到css中width: 960px;课程的container

尝试删除container

上的样式

如果您要使用跨越屏幕宽度的网格容器，您还可以尝试更改容器div类以使用 <div class="container-fluid">利用Bootstrap的内置网格容器，使其以响应方式运行

我无法弄清楚为什么我的网站没有响应

1 个答案: