Question

可能是我错过了一些东西..我正在关注引导程序的Off Canvas模板，我想我能以正确的方式堆叠物品/卡片......我的意思是没有空间向上或向下他们的内容不平衡。

检查此图片以查看我的意思..我认为col-x可以解决这个问题..但事实并非如此如果我不清楚我的问题，请告诉我。

这是示例代码：

  <div class="row">
    <div class="col-6 col-sm-6 col-lg-4">
      ......
    </div><!--/span-->
    <div class="col-6 col-sm-6 col-lg-4">
      .....
    </div><!--/span-->

enter image description here

添加我所说的示例：http://www.bootply.com/121097

谢谢！

Answer 1

您是否正在努力实现“最佳”的目标？或者＆＃39; masonary＆＃39;风格布局？

如果是这样，这里有三种方法可以做到这一点......

1。使用masonary.js

http://masonry.desandro.com/

2。或者您可以编写自己的js函数。一个非常好的资源可以在这里找到（一个开始这种疯狂的人的回答，一个针对pinterest的前端开发）： http://www.quora.com/Pinterest/What-technology-is-used-to-generate-pinterest-coms-absolute-div-stacking-layout

3。或者您可以使用css3列使用css执行此操作。看看这里的示例（尽管这并不能完全解决您的布局）：

http://jsfiddle.net/jalbertbowdenii/7Chkz/

    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;

Answer 2

看完你的代码之后，我可能会怎么做就像有3列垂直布局一样。现在在这些列中，您可以使用标题和详细信息放置div，并且将以适当的方式自动排列，底部没有任何空格。

Answer 3

您需要将每两列包裹在div class="row"内，如下所示：

<div class="container">
  <div class="col-xs-12 col-sm-9">
    <div class="row">
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. magna mollis euismod. Donec sed odio dui. magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
    </div>
    <div class="row">
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
    </div>
    <div class="row">
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravi tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
    </div>
    <div class="row">
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
    </div>
    <!--/span-->
  </div>
</div>
<!--/row-->
<!--/.container-->

<强> Bootply Demo

如何避免角柱中div之间的上下空间

3 个答案: