文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >引导col 4到col sm-6

问引导col 4到col sm-6
EN

Stack Overflow用户
提问于 2016-10-12 18:11:08
回答 3查看 559关注 0票数 1

我见过这样的问题：从3-col 4到col 6，或3x2到2x3的网格。

但这对我没有用。

这是我的HTML：

​

代码语言：javascript
复制
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="services-offered">
	<div class="row">
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
			<div class="service-content">
				<h3>Web Development</h3>
				<p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
			<div class="service-content">
				<h3>Web App Development</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
			<div class="service-content">
				<h3>WordPress Development</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
			<div class="service-content">
				<h3>Web Development</h3>
				<p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
			<div class="service-content">
				<h3>Web App Development</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12 service">
			<div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
			<div class="service-content">
				<h3>WordPress Development</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
			</div>
		</div>
	</div>			
</div>

​

输出可以在头(服务部分)下面看到在这页上。

如你所见。类是col-md-4 col-sm-6 col-xs-12 service，但是它的位置如下：

代码语言：javascript
复制
x  x  x
      x
x  x

在md或更高版本上查看时

怎么解决这个问题呢？

html
css
twitter-bootstrap
twitter-bootstrap-3
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-10-12 18:29:27

1)靴带3

使用响应列重置

有了可用的四层网格，您肯定会遇到这样的问题:在某些断点，列不太清楚，因为其中一个比另一个高。要解决这个问题，请使用.clearfix和响应实用程序类的组合。

不要忘记为大型设备定义.clearfix块：

代码语言：javascript
复制
<div class="clearfix visible-md-block visible-lg-block"></div>

检查结果：

​

代码语言：javascript
复制
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container services-offered">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12 service">
            <div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
            <div class="service-content">
                <h3>Web Development</h3>
                <p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12 service">
            <div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
            <div class="service-content">
                <h3>Web App Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
        </div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-md-4 col-sm-6 col-xs-12 service">
            <div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
            <div class="service-content">
                <h3>WordPress Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
            </div>
        </div>
        <div class="clearfix visible-md-block visible-lg-block"></div>
        <div class="col-md-4 col-sm-6 col-xs-12 service">
            <div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
            <div class="service-content">
                <h3>Web Development</h3>
                <p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
            </div>
        </div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-md-4 col-sm-6 col-xs-12 service">
            <div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
            <div class="service-content">
                <h3>Web App Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12 service">
            <div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
            <div class="service-content">
                <h3>WordPress Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
            </div>
        </div>
    </div>          
</div>

​

2) PHP用于引导3

检查计数器上所需数字的多样性。就像这样：

代码语言：javascript
复制
<?php
  $counter = 0;
  if( have_posts() ){ while( have_posts() ){ the_post();
      if ($counter > 0) {
        $visible = '';
        if ($counter % 2 == 0) $visible .= ' visible-sm-block';
        if ($counter % 3 == 0) $visible .= ' visible-md-block visible-lg-block';
        if ($visible <> "") echo "<div class=\"clearfix" . $visible . "\"></div>\n";
      }
      echo "<div class=\"col-md-4 col-sm-6\">" . the_content() . "</div>\n";
      $counter++;
    }
  }
?>

3)从启动3到引导4

代码语言：javascript
复制
xs = sm
sm = md
md = lg
lg = xs

.visible-xs-block = .hidden-md-up
.hidden-sm-down hidden-lg-up = .hidden-sm-down.hidden-lg-up
.visible-md-block = .hidden-md-down.hidden-xl-up
.visible-lg-block = .hidden-lg-down

.visible-xs-block.hidden-sm-down hidden-lg-up = .hidden-lg-up
.visible-md-block.visible-lg-block = .hidden-md-down

因此，检查结果：

​

代码语言：javascript
复制
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">

<div class="container services-offered">
    <div class="row">
        <div class="col-lg-4 col-md-6 service">
            <div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
            <div class="service-content">
                <h3>Web Development</h3>
                <p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 service">
            <div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
            <div class="service-content">
                <h3>Web App Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
        </div>
        <div class="clearfix hidden-sm-down hidden-lg-up"></div>
        <div class="col-lg-4 col-md-6 service">
            <div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
            <div class="service-content">
                <h3>WordPress Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
            </div>
        </div>
        <div class="clearfix hidden-md-down"></div>
        <div class="col-lg-4 col-md-6 service">
            <div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
            <div class="service-content">
                <h3>Web Development</h3>
                <p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
            </div>
        </div>
        <div class="clearfix hidden-sm-down hidden-lg-up"></div>
        <div class="col-lg-4 col-md-6 service">
            <div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
            <div class="service-content">
                <h3>Web App Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 service">
            <div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
            <div class="service-content">
                <h3>WordPress Development</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
            </div>
        </div>
    </div>          
</div>

​

票数 2
EN

Stack Overflow用户

发布于 2016-10-12 18:24:16

引导程序使用浮点数来组织其列div。如果一个列div是一个不同的高度，它将不能一直向左浮动。在您的示例中，看起来第一和第二服务div比第三服务div高。这导致第二行无法一直向左浮动。修复方法是在列上设置一个一致的高度，并允许float:left一直向左浮动。有点像

代码语言：javascript
复制
.service {
    height:200px;
}

查看此代码以查看浮点数是如何导致以下情况的：

http://codepen.io/egerrard/pen/PGRQYK

票数 2
EN

Stack Overflow用户

发布于 2016-10-12 18:15:21

您需要创建两个不同的行来容纳以下代码的6 columns.Try，

代码语言：javascript
复制
<div class="services-offered">
<div class="row"> <!--1st row-->
    <div class="col-md-4 col-sm-6 col-xs-12 service">
        <div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
        <div class="service-content">
            <h3>Web Development</h3>
            <p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 service">
        <div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
        <div class="service-content">
            <h3>Web App Development</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 service">
        <div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
        <div class="service-content">
            <h3>WordPress Development</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
    </div>
</div>    
  <div class='row'> <!--2nd row-->
<div class="col-md-4 col-sm-6 col-xs-12 service">
        <div class="service-icon"><span class="fa fa-5x fa-code"></span></div>
        <div class="service-content">
            <h3>Web Development</h3>
            <p>My main area of expertise is in web development. I create professional looking websites at affordable prices. All of my websites come with speed, security and search engine optimisation as a standard.</p>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 service">
        <div class="service-icon"><span class="fa fa-5x fa-database"></span></div>
        <div class="service-content">
            <h3>Web App Development</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 service">
        <div class="service-icon"><span class="fa fa-5x fa-wordpress"></span></div>
        <div class="service-content">
            <h3>WordPress Development</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
    </div>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40005540

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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