文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Bootstrap Grid列对齐问题

问Bootstrap Grid列对齐问题
EN

Stack Overflow用户
提问于 2016-05-09 09:30:38
回答 2查看 75关注 0票数 0

我有一个引导网格，我正在我的网站上使用，我在调整大小方面有一些问题。

有一些我想要在小屏幕上消失的列，但现在列的堆叠被打破了。

在不破坏列和行的情况下隐藏这三列#spider4，#spider5，#spider6的最佳方法是什么？

谢谢。

​

代码语言：javascript
复制
<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>
代码语言：javascript
复制
<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">&nbsp;</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">&nbsp;</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>

​

responsive-design
html
css
twitter-bootstrap
twitter-bootstrap-3
EN

回答 2

Stack Overflow用户

发布于 2016-05-09 09:42:46

使用Hidden-xs、Hidden-lg、Hidden-sm和Hiddem-md类在各自的视口中隐藏。也可以使用visible-lg、visible-sm、visible-xs、visible-md

要进行对齐，请删除此CSS类

代码语言：javascript
复制
  #spider2 {
    margin-top: -50px;
}
    #spider7 {
    margin-top: -50px;
}
    #spider9 {
    margin-top: -50px;
}

校正码：

​

代码语言：javascript
复制
<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>
代码语言：javascript
复制
<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">&nbsp;</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">&nbsp;</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
EN

Stack Overflow用户

发布于 2016-05-09 13:05:59

你可能遇到的一个问题是你的媒体查询

代码语言：javascript
复制
@media screen and (max-width: 900px) and (min-width: 0px)

除非你自定义了默认设置，否则bootstrap会在768、992和1200px处设置断点。

因此，您可能应该使用：

代码语言：javascript
复制
@media(max-width:991px)

话虽如此，您可以只使用“可用类”来隐藏这些设备的列。http://getbootstrap.com/css/#responsive-utilities-classes

例如："hidden-xs"和"hidden-sm"结合使用将在所有宽度小于992px的设备上隐藏该列。

对于"clearfix" div，您应该在"xs"和"sm" (所以您必须假装4、5和6不存在)的可视div之后“的每隔一秒可见div之后，以及对于"md"和"lg"的每隔三个div之后插入以下内容

另外，当你定义一个像"col-md-4"这样的断点的网格大小时，如果它也是4列的话，你不需要为下一个大小定义它。

代码语言：javascript
复制
<div class="col-sm-6 col-md-4 col-lg-4">

等同于

代码语言：javascript
复制
<div class="col-sm-6 col-md-4">

这里有一个你的问题的工作示例，我已经更改了每个断点处的主体颜色，只是为了演示目的。

http://codepen.io/partypete25/pen/WwPzxO

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/37106671

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档