twitter-bootstrap Bootstrap:使帮助块内联

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26565934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 21:45:43  来源:igfitidea点击:

Bootstrap: Make help-block inline

twitter-bootstraptwitter-bootstrap-3

提问by EricC

I want the help-block to be inline with the input-field (if there is space available to the right of the input-field), but it is below the input-field no matter how wide the screen is. How can I make it inline?

我希望帮助块与输入字段内联(如果输入字段右侧有可用空间),但无论屏幕有多宽,它都在输入字段下方。我怎样才能使它内联?

Here is the form:

这是表格:

  <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>

And here is a plunk.

这是一个plunk

采纳答案by KyleMit

One of the things .help-blockdoes is set display:block. If you don't want that, you can override it like this:

其中一件事.help-block就是 set display:block。如果你不想那样,你可以像这样覆盖它:

.help-block {
    display: inline;
}

Demo in Plunker

在 Plunker 中演示

回答by Carlos Liu

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

回答by Tom Harris

I know an old question, but for anyone coming across this, just use inline-blockinstead of help-blockas your class.

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