没有行的bootstrap列比行填充更多的列(bootstrap columns without rows padded more than columns with rows)

 我正在使用自举网格系统来布局模态。 
 
 显示商店的模式部分不能有行，因为它只是商店中的foreach商店，所以我不能在它们之间插入行。 这很好，除了它似乎在列不在行内时添加更多填充，这导致我的商店不与上面的内容垂直对齐。 这就是我的意思（商店是纯白色的div）： 
 
  
 
 商店的填充比上面的内容更进一步。 商店没有连续。 
 
 一个商店的代码： 
 
<script type="text/html" id="shop-template">
    <div class="col-sm-6" style="">
        <div style="height: 200px;width:100%; background: #fff;border-radius:15px;padding: 25px;">
            <h6 class="medium-text shop-info" 
                data-bind="text: name" >
            </h6>
            <h6 class="medium-text shop-info" 
                data-bind="text: suburb" 
                style="">
            </h6>
            <h6 class="medium-text shop-info" 
                data-bind="text: streetNumber" style="display:inline;">
            </h6>
            <h6 class="medium-text shop-info" 
                data-bind="text: street" style="display:inline;">
            </h6>
            <h6 class="medium-text shop-info" 
                data-bind="text: country" >
            </h6>
            <h6 class="medium-text shop-info" 
                data-bind="text: postalCode" >
            </h6>
        </div>
    </div>
</script>
 
 如何使商店与上面的内容垂直对齐？ 

I'm using the bootstrap grid system to lay out a modal.
 
The part of the modal that displays shops cannot have rows, because it is simply a foreach shop in shops, so I can't insert rows in between them. This is fine except that it seems to add more padding when the columns are not inside rows, which causes my shops to not be vertically aligned with the content above. Here is what I mean (the shops are the solid white divs):
 
 
The shops are padded further in than the content above them. The shops are not in a row. 
 
code for one shop:
 
<script type="text/html" id="shop-template">
    <div class="col-sm-6" style="">
        <div style="height: 200px;width:100%; background: #fff;border-radius:15px;padding: 25px;">
            <h6 class="medium-text shop-info" 
                data-bind="text: name" >
            </h6>
            <h6 class="medium-text shop-info" 
                data-bind="text: suburb" 
                style="">
            </h6>
            <h6 class="medium-text shop-info" 
                data-bind="text: streetNumber" style="display:inline;">
            </h6>
            <h6 class="medium-text shop-info" 
                data-bind="text: street" style="display:inline;">
            </h6>
            <h6 class="medium-text shop-info" 
                data-bind="text: country" >
            </h6>
            <h6 class="medium-text shop-info" 
                data-bind="text: postalCode" >
            </h6>
        </div>
    </div>
</script>
 
How do I make the shops vertically aligned with the content above?

原文：https://stackoverflow.com/questions/37344036