Question

我想在每一行上制作两排带有3个拇指指甲图片。我正在使用Bootstrap。容器为960px，20px排水沟，宽940px。我已经包含了我的CSS和HTML代码。我究竟做错了什么？我已经有一段时间一直在努力。 CSS代码：

@font-face { font-family: 'Helvetica Neue'; src: url(../fonts/HelveticaNeue.ttf); }

body { border-top:10px solid #fb6938; }
header { border-bottom: 1px solid #e5e5e5; }
header h1 a { display: block; width: 172px; height: 25px; background: url(../img/Logo.png) no-repeat; }
header h1 { margin: 26px 24px 28px 0; }
header h2 {font-weight: normal !important; margin-top: 28px; line-height: 25px; font-family: "Helvetica Neue"; font-size: 14px; color: #7b7b7b; }
header ul { list-style-type: none;}

nav a { display: inline-block; padding: 0 9px; border-right: 2px solid #e5e5e5; border-left: 2px solid #e5e5e5; font: italic 14px Georgia, serif; }
nav ul { margin: 0;}
nav ul.list-inline li { padding: 0; line-height: 79px;}
nav ul :first-child a { border: none; }
nav ul :last-child a { border: none; }

footer { padding-top: 28px; padding-bottom: 28px; border-top: 1px solid #e5e5e5; }
footer nav a { font: normal 11px Arial, sans-serif; }
footer nav ul.list-inline li { line-height: 25px; }

section h1 { font-family: Georgia; font-size: 30px; font-style: italic; color: #000; line-height: 42px; }
img { border-bottom: 10px solid; color: #fb6938; }
section li { color: #ff6b39; }
article { padding-bottom: 30px; border-top: 5px solid #eee;}
article.intro { border-top: none; border-bottom: 5px solid #eee; }

ul.thumbnails { padding: 0px; margin: 0px; }
li.thumbnail:first-child { padding-left: 0px !important;  }
li.thumbnail:nth-child(4) { padding-left: 0px !important; }
li.thumbnail:nth-child(4) { margin-bottom: 39px; }

Html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home template</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link href="css/theme.css" rel="stylesheet"/>
    <meta charset="utf-8" />
</head>
<body>
    <header>
      <div class="container">
        <div class="row">
        <hgroup class="clearfix col-sm-8">
           <h1 class="pull-left"><a class="text-hide " href="/" title="visit the Mumbo home page">Mumbo!</a></h1>
           <h2 class="pull-left">Powered by Jeffrey Way Industries</h2>
        </hgroup>
        <nav class="col-sm-4">
            <ul class="list-inline pull-right">
                <li><a href="#" title="About">About</a></li>
                <li><a href="#" title="Portfolio">Portfolio</a></li>
                <li><a href="#" title="Contact">Contact</a></li>
            </ul>
       </nav>
     </div>
   </div>
    </header>
<section role="main">
  <div class ="container">
    <div class="row">
        <h1 class="col-md-8">Take a look at our work to see what we mean</h1>
        <div class="col-md-4">
    <ul class="list-inline">
        <li><a href="#" title="Facebook">Facebook</a></li>
        <li><a href="#" title="Vimeo">Vimeo</a></li>
        <li><a href="#" title="Last.fm">Last.fm</a></li>
        <li><a href="#" title="LinkedIn">LinkedIn</a></li>
        <li><a href="#" title="Dribbble">Dribbble</a></li>
    </ul>
  </div>
        </div>
        <img alt="A big image!" src="img/hero.png" />
        <article class="intro">
            <h1>Risus portacon vestibulum posuere</h1>
            <div class="row">
            <p class="col-md-8">Cray sustainable <a href="#" title="A link!"> vegan post-ironic</a> mixtape. 8-bit sustainable sed put a bird on it keytar fingerstache et, ennui street art proident wayfarers viral ethnic. Eu craft beer anim, keffiyeh chambray occaecat jean shorts hella selvage keytar butcher vice in. American apparel pour-over master cleanse, fingerstache etsy qui umami dreamcatcher twee.</p>
            <div class="col-md-4">
            <ul class="pull-right">
                <li><a href="#" title="A link">Cray sustainable vegan</a></li>
                <li><a href="#" title="A link">Chambray occaecat jean shorts</a></li>
                <li><a href="#" title="A Link">Hella selvage</a></li>
                <li><a href="#" title="A link">Over master cleanse</a></li>
            </ul>
          </div>
                </div>
        </article>
    <h1>Take a look at our work to see what we mean</h1>
    <ul class="thumbnails">
        <li class="col-md-4 thumbnail text-center">
              <img alt="A thumbnail" src="img/thumb1.png"/>
            <h2>Purus Egestas Fusce</h2>
                <p>
                    Cras justo odio, dapibus ac facilisis
                    egestas eget quam.
                </p>
        </li>
        <li class="col-md-4 thumbnail text-center">
            <img alt="A thumbnail" src="img/thumb2.png"/>
            <h2>Purus Egestas Fusce</h2>
            <p>
                Cras justo odio, dapibus ac facilisis
                egestas eget quam.
            </p>
        </li>

        <li class="col-md-4 thumbnail text-center">
              <img alt="A thumbnail" src="img/thumb3.png"/>
            <h2>Purus Egestas Fusce</h2>
            <p>
                Cras justo odio, dapibus ac facilisis
                egestas eget quam.
            </p>
        </li>
        <li class="col-md-4 thumbnail text-center">
            <img alt="A thumbnail" src="img/thumb4.png"/>
            <h2>
                Purus Egestas Fusce </h2>
            <p>
                Cras justo odio, dapibus ac facilisis
                egestas eget quam.
            </p>
        </li>
        <li class="col-md-4 thumbnail text-center">
                <img alt="A thumbnail" src="img/thumb5.png"/>
                <h2>Purus Egestas Fusce</h2>
                <p>
                    Cras justo odio, dapibus ac facilisis
                    egestas eget quam.
                </p>
        </li>
        <li class="col-md-4 thumbnail text-center">
                <img alt="A thumbnail" src="img/thumb6.png"/>
            <h2>Purus Egestas Fusce</h2>
            <p>
                Cras justo odio, dapibus ac facilisis
                egestas eget quam.
            </p>
        </li>
    </ul>
</div>
<div class="container">
<article>
    <h1>Ornare Tristique Adipiscing Dolor</h1>
    <div class="row">
        <p class="col-md-8">C ray sustainable vegan post-ironic mixtape. 8-bit sustainable sed put a bird on it keytar fingerstache et, ennui street art proident wayfarers viral ethnic. Eu craft beer anim, keffiyeh chambray occaecat jean shorts hella selvage keytar butcher vice in. American apparel pour-over master cleanse, fingerstache etsy qui umami dreamcatcher twee.</p>
        <div class="col-md-4">
        <ul class="pull-right">
            <li><a href="#" title="A link">Cray sustainable vegan</a></li>
            <li><a href="#" title="A link">Chambray occaecat jean shorts</a></li>
            <li><a href="#" title="A link">Hella selvage</a></li>
            <li><a href="#" title="A link">Over master cleanse</a></li>
        </ul>
    </div>
  </div>
</article>
</div>
</section>
    <footer>
      <div class="container">
        <div class="row">
        <small class="col-md-8">&copy; 2012 All Rights Reserved. Powered by Jeffrey Way Industries</small>
    <nav class="col-md-4">
        <ul class="list-inline">
            <li><a href="#" title="About">About</a></li>
            <li><a href="#" title="Portfolio">Portfolio</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
        </ul>
    </nav>
  </div>
</div>
</footer>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>

这就是我得到的：

设计应如下所示：

检查员对代码和结果的更改：

Answer 1

如果没有图像，很难确切地知道问题是什么，但有一个问题可能是图像以不同的尺寸回归。如果是这种情况，我会做以下事情：

将图像包装在具有给定类的div中：

<div class = "img-container">
    <img alt="A thumbnail" src="img/thumb1.png" class = "my-image"/>
</div

将div的宽度设置为内嵌img所需的百分比，并隐藏任何溢出：

.img-container{
  width: 100%; /*Change this to whatever width you want*/
  overflow: hidden;
}

将img的宽度设为100％：

.my-image{
  width: 100%;
}

更新了小提琴https://jsfiddle.net/iamnottony/pdcdnc0w/3/

为什么我的列没有浮动到容器的左边缘？

1 个答案: