css - 如何在 Bootstrap 中的表单左侧添加标题？

Question

我在页面顶部的导航栏中有一个表单。

这是 HTML

<nav id ="topNav" class="navbar navbar-default">
<form class="navbar-form navbar-right navbar-input-group" role="search">
  <div class="form-group">
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Login</button>
</form>
</nav>

这是表单的CSS

.navbar-input-group {
  font-size: 0px; 
  margin-right: 20px;

}

.navbar-input-group input {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.navbar-input-group .btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: 0px;
}

这是在浏览器上的样子

我想在表单左侧添加一些文本(标题 h3)而不发生这种情况

我刚刚在表单上方添加了一个 h3 元素...

<nav id ="topNav" class="navbar navbar-default">
    <h3>Text</h3>
<form class="navbar-form navbar-right navbar-input-group" role="search">

Answer 1

试试这个

.navbar h3, .navbar form{
display: inline-block;
}