Html 引导4：内联表单按钮高度

我正在做一个“模拟”的facebook克隆，我正在尝试在导航栏中做一个简单的“登录”表单

到目前为止，我的功能相当不错，但是“登录”提交按钮的浮动比其他项目高得多：

所以看起来不错，但我猜按钮应该放在“标签”通常放的地方

以下是我迄今为止的代码：

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
      <%= form_for(resource, as: resource_name, url: session_path(resource_name), class: "form-inline") do |f| %>
        <div class="field field form-group mb-2">
          <%= f.label :email %><br />
          <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
        </div>
      </li>
      <li class="nav-item">
        <div class="field field form-group mx-sm-3 mb-2">
          <%= f.label :password %><br />
          <%= f.password_field :password, autocomplete: "current-password", class: "form-control" %>
        </div>
      </li>
      <li class="nav-item">
        <div class="actions mb-2">
          <%= f.submit "Log in", class: "btn btn-primary" %>
        </div>
      </li>
      <% end %>
    </ul>
    </div>

用

li

包装所有东西，用

ul

包装整个团队，我不知道这是否100%必要……但这是唯一有效的方法

---

我想我可以将

页边距顶部调整%左右，但我确信我缺少了一个更清晰的方法。
这应该是可行的，你不应该在li标记内包装表单，然后在li标记外结束表单，试试这个，只需将此代码更改为erb标记，使用常规html运行此代码即可显示表单



电子邮件

密码


最好添加一个空标签。exp

位于
.btn
上方。这将具有一致的间距。