在類行中元素之間留下空白

其實我不知道如何描述這個問題。我設計了一個模型，我在其中指定了類row中的一些元素。但是在3個元素之後留下不必要的空間。引導類row有沒有問題？ Checkout the link. Click on register 在類行中元素之間留下空白

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="row"> 
 
    <div class="col-sm-4 standard"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 school_name"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 occupation"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-sm-4 father_income"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 blood_group"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 type_of_wastage"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-sm-4 photo"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 edit_photo" style="display: none;"> 
 
    <div class="form-group"> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 city"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-12"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-4 address"> 
 
    <div class="form-group"> 
 
    </div> 
 
    </div> 
 

 

 
</div>

來源

2017-07-26 Darshan Kini

請問，您可以添加一些截圖或更詳細的問題是什麼？我不知道有什麼問題 –

的引導電網語法是錯誤的。 Bootstrap中的一行包含12列。如果連續有12列，則必須打開一個新行。在你的情況下，你必須打開一個新的行，你使用3次類col-sm-4。因此，它必須是這樣的：

<div class="row"> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
</div> 
<div class="row"> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
</div>

來源

2017-07-26 06:13:12

我有9個元素，並在ID的基礎上，我隱藏了一些元素。所以如果我寫這樣的代碼並從第一行隱藏兩個元素。然後它顯示第一個元素，然後留下空格。然後第二行從新行繼續。所有元素都應該繼續。即使我隱藏任何數量的元素這就是爲什麼我喜歡這個 –

設置一些最小高度到所有列在寄存器

.modal-body .col-sm-4 { 
    min-height: 86px; 
}

來源

2017-07-26 06:14:53 Martin54

-1

你不能把所有這些列在一排。使用col-sm-4時，每行只能有3列。之後，您需要創建另一行。因爲在自舉網格系統中，每行有12列。如果你需要一排軟管，你必須使用col-sm-1。但我認爲這不是一個好主意。更好的是，由於這裏有10個元素，因此可以使用4行的col-sm-4或3行的col-sm-3。

來源

2017-07-26 06:24:26 KKK

-1

您的編寫語法錯誤。Bootstrap中的一行僅包含12個塊。這就是爲什麼不必要的空間正在顯示。

來源

2017-07-26 06:32:22

在類行中元素之間留下空白

回答

相關問題