2017-07-05 51 views
0

我想要一个接一个地堆叠div而没有任何空间,但我没有做到这一点。我试过这个表,并尝试使用所有方法来删除表格行间的间距,但是我失败了。现在我试图用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

回答

0

它的引导则元素的嵌套不正确。 “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 class="col-lg-8"> 
    <p>@v.headText</p> 
</div> 
<div class="col-lg-4"> 
    <p>@v.amount</p> 
</div>