Bootstrap 未完成 12 列并开始新行

Question

HTML

 <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                        <ul>Server-Side Scripting Languages<li>ASP</li><li>ASP.NET </li><li>ASP.NET MVC</li><li>Hack</li><li>JavaScript</li><li>Java</li><li>PHP</li><li>Python</li><li>Ruby</li></ul>
                     </div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                        <ul>Client-Side Scripting Languages<li>JavaScript</li><li>ActionScript</li><li>Dart</li><li>VBScript</li><li>Typescript</li><li>Python</li></ul>
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                        <ul>PHP Frameworks<li>Cake PHP</li><li>Laravel</li><li>JOOMLA</li><li>Fuel PHP</li><li>Yii</li><li>Code Igniter</li><li>Zend Framework</li></ul>
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                        <ul>Javascript Frameworks<li>Angular JS</li><li>Dojo</li><li>Ext JS</li><li>Ember JS</li><li>jQuery</li><li>Kendo UI</li><li>Backbone JS</li><li>Underscore JS</li></ul>
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                        <ul>Mobile App Development<li>Android</li><li>iOS</li><li>Windows</li><li>Blackberry</li><li>FireFox</li><li>SailFish</li><li>Ubuntu</li></ul>
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                        <ul>Database<li>MySql</li><li>Mongo DB</li><li>RDS</li><li>Redis</li><li>Dynamo</li><li>Cassandra</li></ul>
                    </div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                        <ul>CSS Frame-works<li>Bootstrap</li><li>Pure CSS</li><li>Unsemanitc</li><li>960 Grid system</li><li>Cascade Framework</li><li>Foundation</li></ul>
                    </div>

更新 1：JSFiddle Link JSFIDDLE

这是我的问题。我使用 ajax 调用生成此数据，并希望在不同分辨率下以多种格式显示数据。 md & lg -> 连续 4 个 sm -> 连续 2 个 xs -> 连续 1 个。

现在只有xs可以了。当我看到输出时，md、lg 和 sm 的第二行没有对齐。

如果我设置 div 的高度，那么它工作正常。但是你可以看到每个ul之间的差距。

从jsfiddle中删除下面的代码，你就可以理解其中的区别

    div{
height:200px;
}

Answer 1

我学到了一些新东西：你需要 clearfix！它可以明显地在特定位置提供断点，并且您可以设置不同分辨率的可见性。

 <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                        <ul>Server-Side Scripting Languages<li>ASP</li><li>ASP.NET </li><li>ASP.NET MVC</li><li>Hack</li><li>JavaScript</li><li>Java</li><li>PHP</li><li>Python</li><li>Ruby</li></ul>
                     </div>
                     <div class="clearfix visible-xs"></div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                        <ul>Client-Side Scripting Languages<li>JavaScript</li><li>ActionScript</li><li>Dart</li><li>VBScript</li><li>Typescript</li><li>Python</li></ul>
                    </div>
<div class="clearfix visible-sm"></div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                        <ul>PHP Frameworks<li>Cake PHP</li><li>Laravel</li><li>JOOMLA</li><li>Fuel PHP</li><li>Yii</li><li>Code Igniter</li><li>Zend Framework</li></ul>
                    </div>
<div class="clearfix visible-xs"></div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                        <ul>Javascript Frameworks<li>Angular JS</li><li>Dojo</li><li>Ext JS</li><li>Ember JS</li><li>jQuery</li><li>Kendo UI</li><li>Backbone JS</li><li>Underscore JS</li></ul>
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                        <ul>Mobile App Development<li>Android</li><li>iOS</li><li>Windows</li><li>Blackberry</li><li>FireFox</li><li>SailFish</li><li>Ubuntu</li></ul>
                    </div>
<div class="clearfix visible-xs"></div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                        <ul>Database<li>MySql</li><li>Mongo DB</li><li>RDS</li><li>Redis</li><li>Dynamo</li><li>Cassandra</li></ul>
                    </div>
<div class="clearfix visible-sm"></div>
                    <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                        <ul>CSS Frame-works<li>Bootstrap</li><li>Pure CSS</li><li>Unsemanitc</li><li>960 Grid system</li><li>Cascade Framework</li><li>Foundation</li></ul>
                    </div>

您可以在此处阅读更多内容：http://getbootstrap.com/css/#grid-responsive-resets 并在此处查看编辑后的 JSFiddle：http://jsfiddle.net/4gk4n59t/

Answer 2

这就是我按照@KjetilNordin 完成任务的方式。

windowWidth = $(window).width();
i = 1;
`//loop starts here
  i=i+1;

if(windowWidth > 1200  && i> 4){technologieslist=technologieslist+'<div class="clearfix"></div>';i=1;}
            if(windowWidth <= 1200 && windowWidth > 992  && i > 4){technologieslist=technologieslist+'<div class="clearfix"></div>';i=1;}
            if(windowWidth <= 992 && windowWidth >= 768 && i > 2){technologieslist=technologieslist+'<div class="clearfix"></div>';i=1;} 
 //loop ends here

Bootstrap 未完成 12 列并开始新行

Bootstrap not completing 12 columns and starting new row

twitter-bootstrap

media-queries