我是一个编码新手，如果有人能帮助我解决引导网格上的一个小的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>在Bootstrap的XS断点中，行自动强制任何包含的div显示：块和宽度：100%，以帮助在狭窄的移动屏幕上垂直布局内容。
如果需要在mobile上保留多个列，则必须编写一个类来覆盖断点行为。
示例：
HTML
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 nobreak-2col"></div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 nobreak-2col"></div>
</div>
CSS
@media only screen and (max-device-width : 480px) {
.nobreak-2col{
display:inline !important;
width: 50% !important;
}
}
请检查结果：
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.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;
}
}<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 visible-sm"></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 hidden-xs hidden-sm"></div>
<div id="spider4" class="hidden-xs hidden-sm col-md-4"></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 hidden-xs hidden-sm"></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 visible-sm"></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 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>