Bootstrap 3 CSS導致div高度爲零

Question

我正在使用onsen-ui進行移動應用程序devl。我試圖將我這個頁面上看到這個登陸界面：http://cssdeck.com/labs/simply-login-form

下面是HTML代碼：

<div class="login"> 
<div class="titulo" style="vertical-align:baseline;height:14px;">Staff Login</div> 
<form action="#" method="post" enctype="application/x-www-form-urlencoded"> 
    <input type="text" required title="Username required" placeholder="Username" data-icon="U"> 
    <input type="password" required title="Password required" placeholder="Password" data-icon="x"> 
    <div class="olvido"> 
     <div class="col"><a href="#" title="Ver Carásteres">Register</a></div> 
     <div class="col"><a href="#" title="Recuperar Password">Fotgot Password?</a></div> 
    </div> 
    <a href="#" class="enviar">Submit</a> 
</form> 
</div> 

發生了什麼事是div.titulo和a.enviar元素不知何故被設置爲高度= 0。我無法理解爲什麼發生這種情況，它在我上面列出的網站上工作得很好，甚至當我將相同的代碼複製到一個空的html文件時。我做了一些挖掘和大量的研究後，我發現這bootstap CSS屬性是罪魁禍首：

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

原校址，我從沒有使用引導這個代碼，但我的應用程序......似乎這個bootstrap css與代碼衝突。我註釋掉從上述自舉css文件.....看看之前和我的登錄表單的照片後：

無法正常工作（自舉盒大小的CSS）：

Not working http://www.imageno.com/image.php?id=hnqqzk0sfn90&kk=1698558439

工作（無引導盒大小的CSS）：

Working http://www.imageno.com/image.php?id=in8mdfdvvql2&kk=2088245172

爲什麼會這樣有人能解釋一下嗎？這個盒子的大小和邊界框究竟是什麼，爲什麼它有時導致div高度爲零？

更新...這裏是從該網站提供的CSS：

.login { 
    width: 300px; 
    height: 285px; 
    overflow: hidden; 
    background: #1e1e1e; 
    border-radius: 6px; 
    margin: 50px auto; 
    box-shadow: 0px 0px 50px rgba(0,0,0,.8); 
} 

.login .titulo { 
    width: 298px; 
    height: 14px; 
    padding-top: 13px; 
    padding-bottom: 13px; 
    font-size: 14px; 
    text-align: center; 
    color: #bfbfbf; 
    font-weight: bold; 
    background: #121212; 
    border: #2d2d2d solid 1px; 
    margin-bottom: 30px; 
    border-top-right-radius: 6px; 
    border-top-left-radius: 6px; 
    font-family: Arial; 
} 

.login form { 
    width: 240px; 
    height: auto; 
    overflow: hidden; 
    margin-left: auto; 
    margin-right: auto; 
} 

.login form input[type=text], .login form input[type=password] { 
    width: 200px; 
    font-size: 12px; 
    padding-top: 14px; 
    padding-bottom: 14px; 
    padding-left: 40px; 
    border: none; 
    color: #bfbfbf; 
    background: #141414; 
    outline: none; 
    margin: 0; 
} 

.login form input[type=text] { 
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
    border-top: #0b0b0b solid 1px; 
    background: #141414 url(http://dev.dhenriquez.com/test-img/icons/111-user.png) 10px center no-repeat; 
} 

.login form input[type=password] { 
    border-bottom-left-radius: 6px; 
    border-bottom-right-radius: 6px; 
    border-top: #0b0b0b 1px solid; 
    border-bottom: #353535 1px solid; 
    background: #141414 url(http://dev.dhenriquez.com/test-img/icons /54-lock.png) 10px center no-repeat; 
} 

.login form .enviar { 
    width: 240px; 
    height: 12px; 
    display: block; 
    padding-top: 14px; 
    padding-bottom: 14px; 
    border-radius: 6px; 
    border: none; 
    border-top: #4eb2a8 1px solid; 
    border-bottom: #161616 1px solid; 
    background: #349e92; 
    text-align: center; 
    text-decoration: none; 
    font-size: 12px; 
    font-weight: bold; 
    color: #FFF; 
    text-shadow: 0 -1px #1d7464, 0 1px #7bb8b3; 
    font-family: Arial; 
} 

.login .olvido { 
    width: 240px; 
    height: auto; 
    overflow: hidden; 
    padding-top: 25px; 
    padding-bottom: 25px; 
    font-size: 10px; 
    text-align: center; 
} 

.login .olvido .col { 
    width: 50%; 
    height: auto; 
    float: left; 
} 

.login .olvido .col a { 
    color: #fff; 
    text-decoration: none; 
    font: 12px Arial; 
} 

Answer 1

好了，讓我們解決您的問題，在鏈接TITULO，你硬編碼高度：

<div class="titulo" style="vertical-align:baseline;height:14px;">Staff Login</div> 

所以第一，你應該擺脫內嵌的vertical-align:baseline;height:14px;

非常相同的是在你的CSS，它已被刪除：

.login .titulo { 
    height: 14px; 

[...]

的是，你在找什麼？ http://www.bootply.com/jCz1gi5Hb3

P.S.在CSS中同樣的技巧是「提交」按鈕。