我遇到了设计/css 问题。我正在使用 Twitter Bootstrap 并有一个 .row-fluid,其中包含一个无序列表的类缩略图。在其中,我有三个 .span3 类,我在其中显示作为 .thumbnail 类链接的图像(下面的代码)。问题是,由于某种原因,图像显示为不同的尺寸。您可以参考我在这里谈论的内容:http: //douglascrescenzi.com/#portfolio
HTML 代码:
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3">
<h2>Companies I've founded</h2>
<a href="http://www.herodaysecurity.com" class="thumbnail" target="_blank">
<img src="images/hero-day.jpg" alt="Hero Day Security"></a>
<br>
<br>
<a href="http://www.crowdrouser.com" class="thumbnail" target="_blank">
<img src="images/crowdrouser.jpg" alt="CrowdRouser"></a>
</li>
<li class="span3">
<h2>Employers</h2>
<a href="http://syracusestudentsandbox.com/" class="thumbnail" target="_blank">
<img src="images/student-sandbox.jpg" alt="Syracuse Student Sandbox"></a>
<br>
<br>
<a href="http://ischool.syr.edu/" class="thumbnail" target="_blank">
<img src="images/su-informaiton-studies.jpg" alt="Syracuse University - School of Information Studies"></a>
<br>
<br>
<a href="http://www.mitre.org" class="thumbnail" target="_blank">
<img src="images/mitre.jpg" alt="The MITRE Corporation"></a>
</li>
<li class="span3">
<h2>Freelance</h2>
<a href="http://www.accsocialsecurityservices.com/" class="thumbnail" target="_blank">
<img src="images/acc-sss2.png" alt="ACC Social Security Services"></a>
</li>
</ul>
</div> <!--row-fluid -->
引导 CSS:
.thumbnails {
margin-left: -20px;
list-style: none;
*zoom: 1;
}
.thumbnails:before,
.thumbnails:after {
display: table;
content: "";
}
.thumbnails:after {
clear: both;
}
.row-fluid .thumbnails {
margin-left: 0;
}
.thumbnails > li {
float: left;
margin-bottom: 18px;
margin-left: 20px;
}
.thumbnail {
display: block;
padding: 4px;
line-height: 1;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}
a.thumbnail:hover {
border-color: #0088cc;
-webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.thumbnail > img {
display: block;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
.span3 {
width: 220px;
}
.row-fluid .span3 {
width: 23.404255317%;
*width: 23.3510638276383%;
}
我确信这不是最好的做事方式,但它几乎可以工作(除了显示的图像大小略有不同。
任何想法,建议都非常感谢。谢谢!