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中同样的技巧是“提交”按钮。