我有一个我在我的网站上使用的引导网格，我有一些调整问题。
我希望在小屏幕尺寸上消失一些列，但现在打破了列的堆叠。
隐藏这三列＃spider4，＃spider5，＃spider6的最佳方法是什么，而不会破坏列和行。
感谢。
<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: 900px) and (min-width: 0px) {
#spider2, #spider7, #spider9 {
margin-top: 0px !important;
}
#spider4, #spider5, #spider6 {
display: none;
}
}
</style><html lang="en">
<head>
<title>Example of Bootstrap 3 Multi-Column Grid Layout for All Devices</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
<div class="row">
<div id="spider1" class="col-sm-6 col-md-4 col-lg-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-sm-6 col-md-4 col-lg-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-sm-block"></div>
<div id="spider3" class="col-sm-6 col-md-4 col-lg-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="col-sm-6 col-md-4 col-lg-4"> </div>
<div class="clearfix visible-sm-block"></div>
<div id="spider5" class="col-sm-6 col-md-4 col-lg-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="col-sm-6 col-md-4 col-lg-4"> </div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="clearfix visible-sm-block"></div>
<div id="spider7" class="col-sm-6 col-md-4 col-lg-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-sm-block"></div>
<div id="spider8" class="col-sm-6 col-md-4 col-lg-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-sm-block"></div>
<div id="spider9" class="col-sm-6 col-md-4 col-lg-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)
使用Hidden-xs，Hidden-lg，Hidden-sm＆amp; Hiddem-md类隐藏在各自的视口中。 或者您可以使用visible-lg，visible-sm，visible-xs，visible-md
使对齐删除此CSS类
#spider2 {
margin-top: -50px;
}
#spider7 {
margin-top: -50px;
}
#spider9 {
margin-top: -50px;
}
更正后的代码：
<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;
}
@media screen and (max-width: 900px) and (min-width: 0px) {
#spider2, #spider7, #spider9 {
margin-top: 0px !important;
}
#spider4, #spider5, #spider6 {
display: none;
}
}
</style><html lang="en">
<head>
<title>Example of Bootstrap 3 Multi-Column Grid Layout for All Devices</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
<div class="row">
<div id="spider1" class="col-sm-6 col-md-4 col-lg-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-sm-6 col-md-4 col-lg-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-sm-block"></div>
<div id="spider3" class="col-sm-6 col-md-4 col-lg-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="col-sm-6 col-md-4 col-lg-4"> </div>
<div class="clearfix visible-sm-block"></div>
<div id="spider5" class="col-sm-6 col-md-4 col-lg-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="col-sm-6 col-md-4 col-lg-4"> </div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="clearfix visible-sm-block"></div>
<div id="spider7" class="col-sm-6 col-md-4 col-lg-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-sm-block"></div>
<div id="spider8" class="col-sm-6 col-md-4 col-lg-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-sm-block"></div>
<div id="spider9" class="col-sm-6 col-md-4 col-lg-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>
答案 1 :(得分：0)
您可能遇到的一个问题是您的媒体查询
@media screen and (max-width: 900px) and (min-width: 0px)
除非您已自定义默认值，否则bootstrap的断点为768,992和1200px。
所以你可能应该使用：
@media(max-width:991px)
话虽如此，你可以使用＆＃34;可用的课程＆＃34;隐藏这些设备的列。 http://getbootstrap.com/css/#responsive-utilities-classes
例如;组合使用的"hidden-xs"和"hidden-sm"会在所有低于992px宽的设备上隐藏该列。
对于"clearfix" div，您应该在＆＃34; xs"和"sm"的每隔二个可见div后插入此内容（因此您必须假装不存在4,5和6）以及"md"和"lg"
此外，当您为"col-md-4"这样的断点定义网格大小时，您不会＆＃39;如果它也是4列，则需要为下一个大小定义它。
<div class="col-sm-6 col-md-4 col-lg-4">
相当于
<div class="col-sm-6 col-md-4">
这是您问题的一个有效例子，我在每个断点处更改了车身颜色，仅用于演示目的。