我是一个编码新手，所以如果有人可以帮助我在bootstrap网格上遇到一个小的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>
答案 0 :(得分：0)
请检查结果：
@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>
答案 1 :(得分：0)
在Bootstrap的XS断点中，行会自动强制显示任何包含的div：块和宽度：100％以帮助在狭窄的移动屏幕上垂直布局内容。
如果你需要在移动设备上保留多个列 - 那么你必须编写一个类来覆盖断点行为。
示例：
<强> 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;
}
}