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＆amp; lg - ＆gt;连续4个 sm - ＆gt;连续2个 xs - ＆gt;连续1个。

现在只有xs很好。当我看到输出时，md，lg和sm的第二行没有很好地对齐。

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

从jsfiddle中删除以下代码，您可以理解差异

    div{
height:200px;
}

Answer 1

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

https://www.facebook.com/dialog/share?
  app_id=145634995501895
  &display=popup
  &href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
  &redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

您可以在此处阅读更多内容：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列并开始新行

2 个答案: