Bootstrap 3网格未按预期显示

Question

我有一个Bootstrap 3网格系统为3-6-3。中间的6进一步细分为6- 6，这就是我的数据显示的位置。我现在有两个网格显示我的数据，但不是预期的那样。右侧的div内容按预期显示，但左侧的内容相对于右侧的内容显示。我希望他们显示和紧密堆叠，因为它可以在www.pinterest.com中获得。下面的图片是6个网格，进一步细分为6-6个网格。

​

<div class="container col-xs-offset-0 col-lg-offset-1">
    <div class = "rows">
        <div class="col-md-3">   
            <div class = 'feeds'> 
                <p> Dynamic content goes here... 
                        but this is just one grid stacked on each other</p>
            </div>
        </div>   
        <div class = 'rows'>
        <div class='col-md-6'>
            <div class='rows'>
            <!--Fetch data from Database and echo as many as the 
                        total number of rows returned-->
                <div class='col-md-6'>
                    <div class='alignrows'>
                        <div class = 'feeds'>
                         <p> Dynamic content goes here... 
                         Content determines the height and this is where the problem is</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div class = "rows">
            <div class="col-md-3">
                <p> Dynamic content goes here... 
                   but this is just one grid stacked on each other</p>
            </div>
        </div>
    </div>
</div>

这是CSS：

.alignrows {
    position: relative;
}
.feeds {
    background-color: rgb(238,243,243);
    border-radius: 4px;
    padding: 3px;
    position: relative;
    margin-top: 15px;
    margin-bottom: 25px;
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    font-family: verdana,arial,sans-serif;
}

Answer 1

首先，您必须将所有div重新分组为容器div。demo picture。请试试这段代码，它对我很有效

.test col-md-6:nth-child(even)
{
   clear:both;
}

.k p:last-child
{
  clear:both;
}

示例PHP代码：

    <div class="test">
<?php
    // here Fetch data from Database 
    while(data)
    {
     echo '<div class="col-md-6"> .... </div>';
    }
?>
    </div>

Answer 2

这可以使用一个名为columns的CSS3特性来完成。

您可以设置这些属性column-count、column-gap和column-rule，以使列具有不同的外观。

您还可以使用css媒体选择器为不同的屏幕尺寸设置不同的列号，如下所示：@media (min-width: 1100px)

演示：http://jsfiddle.net/eLVLx/1/

来源：http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

Answer 3

Bootstrap列使用CSS浮动模型。您所描述的当前结果实际上是预期的结果。您所描述的期望结果需要一个更现代的CSS布局模型，如flex或grid，但您也可以在当前代码上添加一个像Masonry这样的JavaScript库。