引導行消失

Question

我有一個包含多行的表單，但其中一個正在消失。

源代碼如下所示：

<div class="container-fluid"> 
<div class="row"><!--works fine--> 
    <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"> 
     ... 
    </div> 
    <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"> 
     ... 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3"> 
     ... 
    </div> 
    <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3"> 
     ... 
    </div> 
    <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"> 
     ... 
    </div> 
    <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"> 
     ... 
    </div> 
    <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2--> 
     <h1>thing1</h1> 
    </div> 
</div> 
<div class="row"><!--this row dissapears--> 
    <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"><!--this div is gone--> 
      <h1>thing2</h1> 
    </div> 
    <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3"> 
     ... 
    </div> 
</div> 
<div class="row"><!--works fine--> 
    <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> 
     ... 
    </div> 
</div> 

至於我可以告訴這個代碼看起來不錯，但是這是事實證明，當被顯示成。

<div class="container-fluid"> 
<div class="row"><!--works fine--> 
    <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"> 
     ... 
    </div> 
    <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"> 
     ... 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3"> 
     ... 
    </div> 
    <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3"> 
     ... 
    </div> 
    <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"> 
     ... 
    </div> 
    <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"> 
     ... 
    </div> 
    <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2--> 
     <h1>thing1</h1> 
     <h1>thing2</h1> 
    </div> 
    <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3"> 
     ... 
    </div> 
</div> 
<div class="row"><!--works fine--> 
    <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> 
     ... 
    </div> 
</div> 

這使得thing1和thing2在一起，並不會出現在自己的行，我不知道爲什麼。

Answer 1

原來我的問題根本不是bootstrap。謝謝大家提及你不能複製它，讓我更深入地挖掘。問題原來就是div中的內容。這是一個帶有自動關閉標籤的角度選擇元素。將其更改爲正常結束標記可以修復所有問題。我將它排除在外，因爲我認爲這不重要，並且在發佈之前沒有進行驗證。

Answer 2

此代碼正常工作。請檢查您的css文件或引導庫。 請使用bootstrap cdn link。

Answer 3

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"><!--works fine--> 
 
     <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"> 
 
     ... 
 
     </div> 
 
     <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3"> 
 
     ... 
 
     </div> 
 
     <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3"> 
 
     ... 
 
     </div> 
 
     <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"> 
 
     ... 
 
     </div> 
 
     <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"> 
 
     ... 
 
     </div> 
 
     <div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2--> 
 
     <h1>thing1</h1> 
 
     </div> 
 
    </div> 
 
    <div class="row"><!--this row dissapears--> 
 
     <div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"><!--this div is gone--> 
 
     <h1>Row that disappears.</h1> 
 
     </div> 
 
     <div class="col-xs-12 col-lg-3 col-md-3 col-sm-3"> 
 
     
 
     </div> 
 
    </div> 
 
    <div class="row"><!--works fine--> 
 
     <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> 
 
     Last Row 
 
     </div> 
 
    </div>

的代碼似乎並沒有出現任何問題@Trevor。根據我的說法，我剛剛實施了它，效果很好。讓我知道我是否誤解了你的問題。