将动态增长的 div 彼此堆叠在一起，它们之间没有空格答案

【问题标题】：Stacking dynamically growing divs on each other without spaces between them将动态增长的 div 彼此堆叠在一起，它们之间没有空格
【发布时间】：2017-07-05 10:18:29
【问题描述】：

我想一个接一个地堆叠 div，它们之间没有任何空间，但我没有做到这一点。我已经在桌子上尝试过这个并尝试了所有方法来删除表格行之间的间距，但我失败了。现在我正在尝试用 div 实现相同的功能，但无法实现所需的输出。下面是我的代码。

    @model IEnumerable<Fast_Tally_Accounter.Models.CPVBase>
<p style="background-image:url('../../viewData/vcr_header.png'); background-repeat:no-repeat; border:0">
</p>
@if (Model != null)
{
    foreach (var v in Model)
    {
        <div class="row" style="margin-left:120px;background-image:url('../../viewData/vcr_row.png'); background-repeat:no-repeat;">

            <div class="col-lg-12">
                <div class="col-lg-6">
                    <p style="padding-top:inherit;">@v.headText</p>
                </div>
                <div class="col-lg-4">
                    <p style="padding-top:inherit; margin-left:5px;">@v.amount</p>
                </div>
            </div>

        </div>
    }
}
<div class="row" style="margin-left:120px;margin-top:-30px;background-image:url('../../viewData/vcr_total_footer.png'); background-repeat:no-repeat">
    <div class="col-lg-12">
        <p style="margin-left:450px;">@ViewBag.total</p>
    </div>
</div>

这就是上面的代码在浏览器上的样子 click here to open the image

【问题讨论】：

标签： html css asp.net bootstrap-modal

【解决方案1】：

它的引导程序然后元素的嵌套不正确。 “col”类必须是“row”的直接子级。此外，col 的大小总和必须为 12 行。你有 6 + 4 即 10。让它 col-lg-8 和 col-lg-4 填满整行。

尝试改变这个 -

<div class="col-lg-12">
            <div class="col-lg-6">
                <p style="padding-top:inherit;">@v.headText</p>
            </div>
            <div class="col-lg-4">
                <p style="padding-top:inherit; margin-left:5px;">@v.amount</p>
            </div>
        </div>

到这里——（基本上就是去掉 col-lg-12 div 和对应的关闭 div）

<div class="col-lg-8">
    <p>@v.headText</p>
</div>
<div class="col-lg-4">
    <p>@v.amount</p>
</div>

【讨论】：