【发布时间】：2016-09-08 23:24:19
【问题描述】：
我是一个编码新手，如果有人能帮助我解决引导网格上的一个小 clearfix 问题，我将不胜感激。
我的网格与 lg、md 和 sm 预设完美对齐，但不适用于 xs。
我希望我的 xs 看起来和 sm 完全一样。所以 2 列 3 行。
如果有人可以提出建议，我将不胜感激。
谢谢。
<style type="text/css">
*/p{
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #dbdfe5;
}
img.image-4-3.home-services-images {
display: block;
float: none;
clear: none;
margin: 0 auto;
max-width: 150px;
padding-bottom: 20px;
}
#spider2 {
margin-top: -50px;
}
#spider7 {
margin-top: -50px;
}
#spider9 {
margin-top: -50px;
}
@media screen and (max-width: 992px) and (min-width: 0px) {
#spider2, #spider7, #spider9 {
margin-top: 0px !important;
}
}
</style> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div id="spider1" class="col-xs-6 col-md-4"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" />
<h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3>
<p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p></div>
<div id="spider2" class="col-xs-6 col-md-4"><img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" />
<h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3>
<p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p></div>
<div class="clearfix visible-xs-block"></div>
<div id="spider3" class="col-xs-6 col-md-4"><img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" />
<h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3>
<p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div id="spider4" class="hidden-xs hidden-sm col-md-4"> </div>
<div class="clearfix visible-xs-block"></div>
<div id="spider5" class="hidden-xs hidden-sm col-md-4"><img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /></div>
<div id="spider6" class="hidden-xs hidden-sm col-md-4"> </div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="clearfix visible-xs-block"></div>
<div id="spider7" class="col-xs-6 col-md-4"><img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" />
<h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3>
<p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p></div>
<div class="clearfix visible-xs-block"></div>
<div id="spider8" class="col-xs-6 col-md-4"><img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" />
<h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3>
<p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p></div>
<div class="clearfix visible-xs-block"></div>
<div id="spider9" class="col-xs-6 col-md-4"><img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" />
<h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3>
<p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p></div>
</div>
</div>
</body>
</html>【问题讨论】：
标签： html css twitter-bootstrap clearfix