Question

我有一个Bootstrap 3网格系统为3-6-3。中间的一个6进一步细分为6-6，这就是我的数据显示的位置。我现在有两个网格显示我的数据但不是预期的。右侧的div内容按预期显示，但显示为在左侧显示屏上相对于右侧显示屏。我想要它们显示并紧密堆叠，因为它可以在www.pinterest.com获得。下图是6格，进一步细分为6-6格。 The picture is 6 grid that was further subdivided into 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 float模型。您描述的当前结果实际上是预期的结果。您描述的所需结果需要更现代的CSS布局模型，如flex或grid，但您也可以将Masonry之类的JavaScript库打到当前代码上。

Bootstrap 3网格未按预期显示

3 个答案: