2017-07-05 54 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>