Bootstrap col-md-4到col-sm-6

时间：2016-10-12 18:11:08

标签： html css twitter-bootstrap twitter-bootstrap-3

我见过这个问题：Boostrap 3 - col-md-4 to col-sm-6, or grid of 3x2 to 2x3

但它对我没用。

这是我的HTML：

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

在标题（服务部分）下面可以看到输出on this page

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

x  x  x
      x
x  x

在md及以上

上查看时

如何解决这个问题？

3 个答案:

答案 0 :(得分：2)

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

这样的东西 
.service {
    height:200px;
}

查看此codepen以查看浮点数如何导致此问题：

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

答案 1 :(得分：2)

1）Bootstrap 3

使用responsive column resets：

  

在四层网格可用的情况下，您必然遇到一些问题，在某些断点处，您的列不能完全正确，因为一个高于另一个。要解决此问题，请使用.clearfix和responsive utility classes的组合。

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

<div class="clearfix visible-md-block visible-lg-block"></div>

检查结果：

<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 for Bootstrap 3

根据所需数字的多重性检查计数器。像这样：

<?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>从Bootstrap 3到Bootstrap 4 
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

所以检查结果：

<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 :(得分：0)

您需要创建两个不同的行来容纳6列。请尝试以下代码，

<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>


相关问题
最新问题