【发布时间】：2015-08-31 12:11:07
【问题描述】：
按照 TutsPlus 使用 Bootstrap 启动您的投资组合教程。
尝试使用 Bootstrap 3 的 col-sm-4 类实现 3 列组合，以获得类似：
相反，这是我得到的：
这是我缩小时得到的结果：
HTML 代码：
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<nav class="navbar">
<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="#bs-example-navbar-collapse-1">
<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="#">Red Beluga</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="home.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid text-center">
<div class="jumbotron">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1>Hello, welcome to Red Beluga's lab.</h1>
<p class="lead">
We build simple web apps.
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid filterable-portfolio">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills">
<li class="portfolio-title">Filter by:</li>
<li role="presentation" class="active"><a href="#">All</a></li>
<li role="presentation"><a href="#">Animation</a></li>
<li role="presentation"><a href="#">Design</a></li>
<li role="presentation"><a href="#">Photography</a></li>
<li role="presentation"><a href="#">Web</a></li>
</ul>
</div>
</div>
<div class="row portfolio-items">
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
CSS 代码：
@import 'main.css';
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Abril+Fatface);
html{
background: #222 url(../img/abstract-bg.svg) bottom right no-repeat;
height: 100%;
background-attachment: fixed;
overflow-y: scroll;
}
body{
background: none;
line-height: 1.5;
color: #F5F5F5;
font-family: 'Source Sans Pro', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Abril Fatface', cursive;
margin-top: 0;
}
p {
margin-bottom: 1rem;
}
.navbar-brand, .navbar-nav>li>a{
color: #F5F5F5;
font-weight: bold;
}
.navbar-brand:hover, .navbar-nav>li>a:hover{
color: #F5F5F5;
font-weight: bold;
background: none;
}
.navbar-nav>li>a:after{
content: '/';
margin-left: 30px;
}
.navbar-nav>li:last-child>a:after{
content: '';
}
.navbar-toggle{
background: #111;
}
.navbar-toggle .icon-bar{
background: #F5F5F5;
}
@media (max-width: 768px) {
.navbar-nav>li>a:after{
content: '';
}
.navbar-nav>li>a{
background: #111;
border-radius: 4px;
margin-bottom: 3px;
}
}
.container .jumbotron, .container-fluid .jumbotron{
padding-left: 0;
padding-right: 0;
}
.jumbotron{
background: none;
margin-top: 75px;
margin-bottom: 75px;
}
.jumbotron h1 {
font-size: 120px;
}
.jumbotron .lead {
font-size: 32px;
}
@media (max-width: 992px) {
.jumbotron h1{
font-size: 72px;
}
}
@media (max-width: 768px) {
.jumbotron h1{
font-size: 40px;
}
.jumbotron .lead {
font-size: 20px;
}
}
.portfolio-title{
padding: 10px 15px 10px 0px;
font-weight: bold;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
color: #F5F5F5;
background: #111;
}
.nav-pills a {
color: #F5F5F5;
margin-bottom: 1rem;
}
.nav>li>a:focus, .nav>li>a:hover{
background: none;
}
.portfolio-item {
margin-bottom: 1rem;
}
.portfolio-item img{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
border-radius: 4px;
}
.portfolio-item:hover img{
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}
.filterable-portfolio{
margin-bottom: 3rem;
}
知道我做错了什么吗？
【问题讨论】：
标签： html css twitter-bootstrap