Question

我想一个接一个地堆叠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

Answer 1

它的Bootstrap然后元素的嵌套是不正确的。 “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>

堆叠动态增长的div彼此之间没有空格

1 个答案: