我有一个包含三张图片的部分。它在除移动设备之外的每个显示器上看起来都很完美,其中图像浮动。它们似乎与中心的起点一致。我的网站上的每个其他部分都完美对齐,因为boostrap行告诉他们。
<section id="press" class="parralax-window img-responsive" data- parallax="scroll" data-image-src="img/dawn.jpg">
<div class="row text-center">
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<h2><strong>Omtale</strong></h2>
</div>
<div class="companies">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
<a href="http://iphoneguide.dk/apps/svampeguide-til-svampejaegerne/"><img src="http://i.imgur.com/0ETpuAx.png" class="img-responsive" alt="Iphoneguide - SvampeGuide"></a>
</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
<a href="http://politiken.dk/forbrugogliv/digitalt/ECE2412664/her-er-3-gode-apps-til-efteraaret/"><img src="http://i.imgur.com/8W49tLt.png" class="img-responsive" alt="Politiken - SvampeGuide"></a>
</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
<a href="http://spisesvampe.webbyen.dk/"><img src="http://i.imgur.com/pax4KwJ.png" class="img-responsive" alt="Spisesvampe - SvampeGuide"></a>
</div>
</div>
</div>
</section>
我使用的是parralax插件,但我没有使用它就尝试了它,它似乎没有造成任何影响。
我的css:
#press {
color: white;
padding: 8em;
}
#press h2 {
padding-bottom: 5%;
font-size: 5vmax;
}
#press img {
min-height: 30px;
min-width: 150px;
display: inline !important;
}
我也尝试删除了img-responsive类但没有帮助。
你知道造成这种情况的原因吗?
答案 0 :(得分:2)
http://jsfiddle.net/wyLqa8w5/1/
#press {
padding: 15%;
}
我认为你应该多看一下bootstrap。
例如,
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
可以缩短为
<div class="col-xs-12">
另外,请记得自行关闭图片代码:
<img src="" />
答案 1 :(得分:0)
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<h2><strong>Omtale</strong></h2>
</div>
HeJ小鼠,
我很确定上面的代码是不正确的,你应该将col-md-12的div包含在包含img的所有3个col中 - 尝试一下。你能为我提供.img响应课吗?
我想看到它。