自举网格扭曲答案

【问题标题】：Bootstrap grid distorted自举网格扭曲
【发布时间】：2014-10-10 03:40:30
【问题描述】：

<div class="container">
    <div class="row">
        <div class="col-md-3" style="height:100px; background-color:#000000; padding:3px; border:2px solid grey; color:#ffffff">1</div>
        <div class="col-md-3" style="height:300px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">2</div>
        <div class="col-md-3" style="height:150px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">3</div>
        <div class="col-md-3" style="height:40px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">4</div>
        <div class="col-md-3" style="height:120px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">5</div>
        <div class="col-md-3" style="height:130px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">6</div>
        <div class="col-md-3" style="height:190px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">7</div>
        <div class="col-md-3" style="height:121px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">8</div>
        <div class="col-md-3" style="height:30px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">9</div>
        <div class="col-md-3" style="height:90px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">10</div>
    </div>
</div>

我正在尝试制作一个看起来像表格的网格，div class='col-md-3' 是动态生成的。

它应该看起来像一个表格，每行只有 4 列。由于高度不均匀，图像会堆叠在一起，看起来不像一张桌子。

代码有问题吗？结果：http://i.stack.imgur.com/1hNPs.png

【问题讨论】：

您需要添加更多行。由于您的每一列都是 3 宽，因此每行应该只包含您的 4 列。
扩展 @2pha 评论的内容：如果您查看 Bootstrap 文档，行基于 12 列 网格系统。一旦你读取了 12 列（例如 4 个col-md-3 divs），你需要为“row”关闭你的 div 并开始一个新行。
这可能会帮助你stackoverflow.com/questions/30423892/…

标签： html css twitter-bootstrap

【解决方案1】：

在bootstrap中总列数是12行，一行只能放4个col-md-3

http://getbootstrap.com/css/#grid-example-basic

<div class="container">
    <div class="row">
        <div class="col-md-3" style="height:100px; background-color:#000000; padding:3px; border:2px solid grey; color:#ffffff">1</div>
        <div class="col-md-3" style="height:300px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">2</div>
        <div class="col-md-3" style="height:150px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">3</div>
        <div class="col-md-3" style="height:40px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">4</div>

    </div>

    <div class="row">
 <div class="col-md-3" style="height:120px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">5</div>
        <div class="col-md-3" style="height:130px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">6</div>
        <div class="col-md-3" style="height:190px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">7</div>
        <div class="col-md-3" style="height:121px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">8</div>


    </div>
</div>

【讨论】：

如果我想在屏幕尺寸不同时改变它怎么办？例如
如果您显示的数据如表一记录有 4 列。那么您不需要将 col-md-3 更改为 col-lg-6。为表格添加 col-lg-3，因为列将保持不变。
另外，这取决于您的设计要在大中小分辨率上显示多少列
我希望它显示为大屏幕 col-lg-3 的 4 列和中屏幕 col-md-6 的 2 列，如果是这样，我如何定位标签，这样它就不会被扭曲？
不会影响设计

【解决方案2】：

由于不同的列大小，它发生了。这可以通过以下方式解决：

<div class="row" style="display:flex; flex-wrap:wrap;">
    ...
</div>

【讨论】：