Bootstrap媒体对象无法正确对齐

Question

我正在使用Bootstrap 3 media objects并且我在这里动态地使用此代码我希望在一行中有4列，但问题是最后一行在第二行之间会有空格。 这是我的代码。

// content.php

for(var i=0;i<12;i++){
                mymdedia+=
                    '<div class="media col-sm-3">'+
                      '<div class="media-left">'+
                         '<a href="#">'+
                            '<img src=".....">'+
                          '</a>'+
                      '</div>'+
                         '<div class="media-body">'+
                             '<h4 class="media-heading">'John Doe'</h4>'+
                             '<p>Live: '+data[i].address+'</p>'+

                          '</div>'+
                    '</div>';
        }
    $('#mycontainer').append(mymdedia);

//的index.php

 <div class="someclass">
                  <div class="row" id="mycontainer">

                  </div>
            </div>

，结果如下

Answer 1

我相信你将所有媒体对象放在一行......而且它们不适合。

在您打开的每一行（<div class='row'>...</div>）中，您只能放置4 <div class='media col-sm-3'></div> ...因为每个col尺寸= 3 ......（4x3 = 12）

所以在for循环中，在每4个媒体对象之后 - 你应该关闭当前行div并创建一个新的<div class='row'> ......

请参阅plunker：http://plnkr.co/edit/BJa3qdbKcYMDwhW809gp?p=preview

在for循环之后：

for(var i=0;i<12;i++){
    if ( i && i % 4 == 0 )
      mymdedia += '</div><div class="row">';    // close row and create a new one

     ... your original code ...

}

mymdedia += '</div>' // close the last row outside the for loop ...