我有一个在我的网站上使用的 Bootstrap 网格，但我遇到了一些调整大小的问题。
有一些列我想在小屏幕上消失，但现在列的堆叠被破坏了。
在不破坏列和行的情况下隐藏这三列#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> 最佳答案
使用 Hidden-xs、Hidden-lg、Hidden-sm 和 Hiddem-md 类隐藏在各自的视口(viewport)中。 或者你可以使用 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>关于html - Bootstrap 网格列对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37106671/