Bootstrap：使帮助块内联答案

【问题标题】：Bootstrap: Make help-block inlineBootstrap：使帮助块内联
【发布时间】：2014-10-25 18:45:49
【问题描述】：

我希望帮助块与输入字段内联（如果输入字段右侧有可用空间），但无论屏幕多宽，它都位于输入字段下方。如何使其内联？

这是表格：

  <form class="form-inline" role="form">
    <div class="form-group">
      <label for="query">Search</label>
      <input type="text"
             ng-model="query"
             class="form-control"
             id="query"
             placeholder="Enter search text">
      <span class="help-block">
        Search in any field...
      </span>
    </div>
  </form>

这是plunk。

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

/* Make the help displayed horizontally and set with same color with help-block */
.help-inline {
  display: inline;
  color: #737373;
}

【讨论】：

【解决方案2】：

我知道一个老问题，但对于遇到此问题的任何人，只需使用 inline-block 而不是 help-block 作为您的班级。

【讨论】：

【解决方案3】：

.help-block 所做的事情之一是设置display:block。如果你不想这样，你可以像这样覆盖它：

.help-block {
    display: inline;
}

Demo in Plunker

【讨论】：