codepen bootstrap 手机版错误
codepen bootstrap mobile version wrong
我正在掌握 bootstrap 的诀窍，到目前为止它很棒。
我试着先从移动设备上制作我的网站，然后再上线。但我想我做错了什么或错过了一步。当我在 codepen where I built it it looks fine at any width. However, when I look at it through my iPhone or jsfiddle 中查看页面时，工作面看起来完全错误，它们没有对齐，而且到处都是。当屏幕为 xs 或 sm 时，我希望我的项目在 2 行中，当设备为 md 时有 3 列，当设备为 lg 时有 4 列。似乎 sm、md、lg 部件正在按它们应该的方式工作，但不是 xs。
此外，当视口足够小以致于折叠导航栏时，如何在单击其中的内容后将其删除。示例我展开它并单击项目，它会转到该部分但不会将其删除。
<body>
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navie" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">PORTFOLIO</a>
</div>
<div class="collapse navbar-collapse pull-right" id="navie">
<ul class="nav navbar-nav">
<li class="active"><a href="#slide2">Home <span class="sr-only"></span></a></li>
<li><a href="#slide2">About</a></li>
<li><a href="#slide3">Projects</a></li>
<li><a href="#slide4">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!----- SLIDES START --->
<div class="jumbotron" id="slide1">
<div class="container-fluid">
</div>
</div>
<div id="slide2">
<div class="container-fluid">
<div class="row">
<div class="col-lg-offset-1 col-lg-10">
<h1 class="text-center" id="about">About</h1>
<p class="text-justify lead" id="aboutMe">
Hi there! My name is Irving Gonzalez and I am a <b>Computer Science</b> graduate from <b>John Jay College of Criminal Justice</b>. Currently, I am working towards becoming a Full Stack Web Developer with the help of the curriculum from <b>freeCodeCamp</b> as well as other self-taught web services. I have a passion for innovation, deviation, technology, and languages.
<br>
<br> Below are some of the projects I've made.
</p>
</div>
</div>
</div>
</div>
<div id="slide3">
<div class="container-fluid">
<div class="row">
<h1 class="text-center">Works</h1>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a href="http://codepen.io/IrvingG/full/BjVvjb/" class="thumbnail" id="workThumbnails"><img src="http://i67.tinypic.com/9u8ytv.jpg" class="img-rounded" alt="Future Project">
<div class="caption text-center">
<h4>Random Quotes</h4></div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a href="http://codepen.io/IrvingG/full/adRrvW/" class="thumbnail" id="workThumbnails"><img src="http://i65.tinypic.com/2n21a8g.jpg" alt="Calculator" class="img-rounded">
<div class="caption text-center">
<h4>Calculator</h4></div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a href="http://codepen.io/IrvingG/full/RrXKxK/" class="thumbnail" id="workThumbnails"><img src="http://i64.tinypic.com/r9k778.jpg" alt="Tribute" class="img-rounded">
<div class="caption text-center">
<h4>Tribute</h4></div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a href="http://codepen.io/IrvingG/full/zqxLrE/" class="thumbnail" id="workThumbnails"><img src="http://i63.tinypic.com/2rmb98o.jpg" alt="Weather App" class="img-rounded">
<div class="caption text-center">
<h4>Weather App</h4></div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a class="thumbnail" id="workThumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="Future Project" class="img-rounded">
<div class="caption text-center">
<h4>Future Project</h4></div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a class="thumbnail" id="workThumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="Future Project" class="img-rounded">
<div class="caption text-center">
<h4>Future Project</h4></div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a class="thumbnail" id="workThumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="Future Project" class="img-rounded">
<div class="caption text-center">
<h4>Future Project</h4></div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a class="thumbnail" id="workThumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="Future Project" class="img-rounded">
<div class="caption text-center">
<h4>Future Project</h4></div>
</a>
</div>
</div>
</div>
</div>
<div id="slide4">
<div class="container-fluid">
<div class="row">
<div class="col-xs-offset-1 col-xs-10 col-lg-offset-1 col-lg-4">
<h1> CONTACT </h1>
<p class="text-justify lead" id="contact">
If you have any questions and/or comments, feel free to send me a message through any of these</p>
</div>
<div class="col-xs-offset-1 col-xs-10 col-lg-offset-1 col-lg-5">
<div class="row">
<div class="col-xs-4">
<a href="mailto:irv.jgonz@gmail.com" alt="irv.jgonz@gmail.com"><i class="fa fa-envelope fa-3x"></i></a></div>
<div class="col-xs-4">
<a href="http://www.freecodecamp.com/irvgonz" alt="FreeCodeCamp" target="_blank">
<i class="fa fa-fire fa-3x"></i></a>
</div>
<div class="col-xs-4"><a href="http://github.com/irvgonz" target="_blank"><i class="fa fa-github-square fa-3x"></i></a></div>
<div class="col-xs-4"><a href="https://www.linkedin.com/in/irving" target="_blank"><i class="fa fa-linkedin-square fa-3x"></i></a></div>
<div class="col-xs-4"><a href="https://www.facebook.com/irving.gonzalez.1466" target="_blank"><i class="fa fa-facebook-official fa-3x"></i></a></div>
<div class="col-xs-4"><a href="https://twitter.com/g0_irving" target="_blank"><i class="fa fa-twitter-square fa-3x"></i></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-bottom" role="navigation">
<div class="container-fluid">
<div class="navbar-text pull-left">
<p>@ 2016 Irving Gonzalez</p>
</div>
</div>
</div>
</body>
使用网格
这里的主要问题似乎是布局中缺少行，或者更具体地说，所有内容都在一个 <div class="row"> 中。大多数情况下，Cols 可以处理折叠，但在您的情况下，您的某些项目名称在足够小的视口上会换行成两行，导致容器的高度不匹配并导致布局中断.如果您将每一行 cols 包装成一行，那么这将不会发生，因为 cols 将有一个直接容器来对齐它们。
这可以通过弄乱标题和 font-sizes 来解决，但实际上，确保布局保留其行和列的最安全方法是明确定义它们，而不是像在代码中那样暗示它们.
补充说明
此外，请将您的章节标题放在单独的 row/col 中。我说的是这些部分：
...
<div id="slide3">
<div class="container-fluid">
<div class="row">
<h1 class="text-center">Works</h1>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
...
应该是
...
<div id="slide3">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1 class="text-center">Works</h1>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
...
在这种情况下你不知何故逃脱了它，但是 non-floated non-col 元素应该有自己的行 + full-width col 或者留在行之外 floated/col 里面的元素，否则会发生奇怪的事情。
点击菜单项时自动折叠导航栏
这应该是一个单独的问题，以保持 SO 的单一 Q/A 格式 - 不管怎样，这里有一个解决方案：简单地 在 之后模拟导航栏折叠按钮上的点击事件 link 已被点击（或者你可以使用 bootstrap 的 js 方法，但我会把它留给你）。
$('.nav li a').on('click', function() {
$('.navbar-toggle').trigger('click');
})
我正在掌握 bootstrap 的诀窍，到目前为止它很棒。
我试着先从移动设备上制作我的网站，然后再上线。但我想我做错了什么或错过了一步。当我在 codepen where I built it it looks fine at any width. However, when I look at it through my iPhone or jsfiddle 中查看页面时，工作面看起来完全错误，它们没有对齐，而且到处都是。当屏幕为 xs 或 sm 时，我希望我的项目在 2 行中，当设备为 md 时有 3 列，当设备为 lg 时有 4 列。似乎 sm、md、lg 部件正在按它们应该的方式工作，但不是 xs。
此外，当视口足够小以致于折叠导航栏时，如何在单击其中的内容后将其删除。示例我展开它并单击项目，它会转到该部分但不会将其删除。
<body>
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navie" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">PORTFOLIO</a>
</div>
<div class="collapse navbar-collapse pull-right" id="navie">
<ul class="nav navbar-nav">
<li class="active"><a href="#slide2">Home <span class="sr-only"></span></a></li>
<li><a href="#slide2">About</a></li>
<li><a href="#slide3">Projects</a></li>
<li><a href="#slide4">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!----- SLIDES START --->
<div class="jumbotron" id="slide1">
<div class="container-fluid">
</div>
</div>
<div id="slide2">
<div class="container-fluid">
<div class="row">
<div class="col-lg-offset-1 col-lg-10">
<h1 class="text-center" id="about">About</h1>
<p class="text-justify lead" id="aboutMe">
Hi there! My name is Irving Gonzalez and I am a <b>Computer Science</b> graduate from <b>John Jay College of Criminal Justice</b>. Currently, I am working towards becoming a Full Stack Web Developer with the help of the curriculum from <b>freeCodeCamp</b> as well as other self-taught web services. I have a passion for innovation, deviation, technology, and languages.
<br>
<br> Below are some of the projects I've made.
</p>
</div>
</div>
</div>
</div>
<div id="slide3">
<div class="container-fluid">
<div class="row">
<h1 class="text-center">Works</h1>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a href="http://codepen.io/IrvingG/full/BjVvjb/" class="thumbnail" id="workThumbnails"><img src="http://i67.tinypic.com/9u8ytv.jpg" class="img-rounded" alt="Future Project">
<div class="caption text-center">
<h4>Random Quotes</h4></div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a href="http://codepen.io/IrvingG/full/adRrvW/" class="thumbnail" id="workThumbnails"><img src="http://i65.tinypic.com/2n21a8g.jpg" alt="Calculator" class="img-rounded">
<div class="caption text-center">
<h4>Calculator</h4></div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a href="http://codepen.io/IrvingG/full/RrXKxK/" class="thumbnail" id="workThumbnails"><img src="http://i64.tinypic.com/r9k778.jpg" alt="Tribute" class="img-rounded">
<div class="caption text-center">
<h4>Tribute</h4></div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a href="http://codepen.io/IrvingG/full/zqxLrE/" class="thumbnail" id="workThumbnails"><img src="http://i63.tinypic.com/2rmb98o.jpg" alt="Weather App" class="img-rounded">
<div class="caption text-center">
<h4>Weather App</h4></div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a class="thumbnail" id="workThumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="Future Project" class="img-rounded">
<div class="caption text-center">
<h4>Future Project</h4></div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a class="thumbnail" id="workThumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="Future Project" class="img-rounded">
<div class="caption text-center">
<h4>Future Project</h4></div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a class="thumbnail" id="workThumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="Future Project" class="img-rounded">
<div class="caption text-center">
<h4>Future Project</h4></div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
<a class="thumbnail" id="workThumbnails"><img src="https://cdn4.iconfinder.com/data/icons/under-construction/512/coming_soon-256.png" alt="Future Project" class="img-rounded">
<div class="caption text-center">
<h4>Future Project</h4></div>
</a>
</div>
</div>
</div>
</div>
<div id="slide4">
<div class="container-fluid">
<div class="row">
<div class="col-xs-offset-1 col-xs-10 col-lg-offset-1 col-lg-4">
<h1> CONTACT </h1>
<p class="text-justify lead" id="contact">
If you have any questions and/or comments, feel free to send me a message through any of these</p>
</div>
<div class="col-xs-offset-1 col-xs-10 col-lg-offset-1 col-lg-5">
<div class="row">
<div class="col-xs-4">
<a href="mailto:irv.jgonz@gmail.com" alt="irv.jgonz@gmail.com"><i class="fa fa-envelope fa-3x"></i></a></div>
<div class="col-xs-4">
<a href="http://www.freecodecamp.com/irvgonz" alt="FreeCodeCamp" target="_blank">
<i class="fa fa-fire fa-3x"></i></a>
</div>
<div class="col-xs-4"><a href="http://github.com/irvgonz" target="_blank"><i class="fa fa-github-square fa-3x"></i></a></div>
<div class="col-xs-4"><a href="https://www.linkedin.com/in/irving" target="_blank"><i class="fa fa-linkedin-square fa-3x"></i></a></div>
<div class="col-xs-4"><a href="https://www.facebook.com/irving.gonzalez.1466" target="_blank"><i class="fa fa-facebook-official fa-3x"></i></a></div>
<div class="col-xs-4"><a href="https://twitter.com/g0_irving" target="_blank"><i class="fa fa-twitter-square fa-3x"></i></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-bottom" role="navigation">
<div class="container-fluid">
<div class="navbar-text pull-left">
<p>@ 2016 Irving Gonzalez</p>
</div>
</div>
</div>
</body>
使用网格
这里的主要问题似乎是布局中缺少行，或者更具体地说，所有内容都在一个 <div class="row"> 中。大多数情况下，Cols 可以处理折叠，但在您的情况下，您的某些项目名称在足够小的视口上会换行成两行，导致容器的高度不匹配并导致布局中断.如果您将每一行 cols 包装成一行，那么这将不会发生，因为 cols 将有一个直接容器来对齐它们。
这可以通过弄乱标题和 font-sizes 来解决，但实际上，确保布局保留其行和列的最安全方法是明确定义它们，而不是像在代码中那样暗示它们.
补充说明
此外，请将您的章节标题放在单独的 row/col 中。我说的是这些部分：
...
<div id="slide3">
<div class="container-fluid">
<div class="row">
<h1 class="text-center">Works</h1>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
...
应该是
...
<div id="slide3">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1 class="text-center">Works</h1>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
...
在这种情况下你不知何故逃脱了它，但是 non-floated non-col 元素应该有自己的行 + full-width col 或者留在行之外 floated/col 里面的元素，否则会发生奇怪的事情。
点击菜单项时自动折叠导航栏
这应该是一个单独的问题，以保持 SO 的单一 Q/A 格式 - 不管怎样，这里有一个解决方案：简单地 在 之后模拟导航栏折叠按钮上的点击事件 link 已被点击（或者你可以使用 bootstrap 的 js 方法，但我会把它留给你）。
$('.nav li a').on('click', function() {
$('.navbar-toggle').trigger('click');
})