使用help-block时如何使项目保持一致？

Question

我在bootstrap 3中使用form-inline。

但是当我添加一个help-block时，输入和按钮不在一行中。

JSFiddle上的代码

如何使输入和按钮仍然像这样？感谢

Answer 1

在CSS中，inline！== 排成一行 。

您需要做的就是更改inline元素的垂直对齐方式：

@media (min-width: 768px) {
  form.form-inline .form-control, 
  form.form-inline .form-group {
    vertical-align: top;
  }
  .help-block {
    max-width: 196px; 
  }
}

Updated fiddle