Question

关注TutsPlus使用Bootstrap启动你的产品组合教程。

尝试使用Bootstrap 3＆＃39; col-sm-4类实现3列组合，以获得类似于： enter image description here

相反，这是我得到的： enter image description here

这是我缩小时的结果： enter image description here

HTML code：

<!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;
}

知道我做错了吗？

Answer 1

你需要将col-sm-4包裹在行中，

更改此部分并使用 3 col-sm-4作为包装的行;
网格用作第12个系统列，请检查bootstrap grid

<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 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>
   </div><!-- closing first row -->
  <div class="row portfolio-items">
        <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><!-- closing sec row -->
    </div>

Answer 2

你的问题在于normalize.css应用于 figure 标签元素的样式（margin-top的1em中的一些额外边距和margin-right的40px，导致你的对于col-sm-4 div，内容要比Bootstrap的33.3％宽度宽。将 figure 元素切换为div或为 figure 标记提供取代值，以消除normalize应用的行为。这就是我的意思：

demonstration of figure styles from normalize

[编辑] 为了更好地查看gif，check it out in a different tab。我以更高的分辨率拍摄它，而不是看起来很好。

以下是我从上述代码生成的the plnkr链接。

AngularJR的答案之所以有效是因为他不只是使用了Bootstrap的CDN，他还通过在 normalize.css之后放置Bootstrap的CSS 来改变CSS加载的顺序，使其成为继承Bootstrap的最后一个（和取代）。 [/编辑]

Answer 3

您需要将col-sm-4 div设置为另一个col-md-12 div，否则它将设置总页面宽度的33.3％并使一切看起来都很傻。

Answer 4

3列布局的标记是：

<div class="row>
    <div class="col-md-4">...cat1...</div>
    <div class="col-md-4">...cat2...</div>
    <div class="col-md-4">...cat3...</div>
</div>
<div class="row>
    <div class="col-md-4">...professor puddinpop...</div>
    <div class="col-md-4">...colonel snazzypants...</div>
    <div class="col-md-4">...the good king snugglewumps...</div>
</div>
<div class="row">
    ...
</div>

当屏幕变得足够小时，这将确保在堆叠之前有3列。

有关详细信息，请参阅网格上的bootstrap docs。

Answer 5

Thibaud Clement ，您的自定义CSS可能会出现问题。
当我在你的代码中添加一个cdn Bootstrap css时，它运行正常。

点击此处 Fiddle 。

 <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">
<!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

添加到此
看起来您的问题可能来自另一篇帖子的normalize.css。我认为这是在正确的轨道上。我为normalize.css添加了一个cdn，但你的代码仍然正常正如您将在 updated Fiddle 中看到的那样。

Bootstrap 3 col-sm-4创建两列而不是3列

5 个答案: