Question

<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

Answer 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>

Answer 2

由于列大小不同，它会发生这种情况。这可以通过以下方式解决：

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

Bootstrap网格扭曲

2 个答案: