Bootstrap：当它太长时，如何使水平形式“内联帮助”看起来更好？

Question

我觉得帮助线如此不一致非常难看。有没有一种简单的方法可以美化它？

以下是我所说的基本示例：http://jsfiddle.net/TyBwc/1/

<form class="form form-horizontal">
    <div class='control-group'>
        <label class='control-label' for='inputWarning'>Input with warning</label>
        <div class='controls'>
            <input id='inputWarning' type='text'>
            <span class='help-inline'>Something  afdaf da</span>
        </div>
    </div>
    <div class='control-group'>
        <label class='control-label' for='inputWarning'>Input with warning</label>
        <div class='controls'>
            <input id='inputWarning' type='text'>
            <span class='help-inline'>Something  afdaf da Something  afdaf da Something  afdaf da Something  afdaf da Something  afdaf da Something  afdaf da </span>
        </div>
    </div>
</form>

正如您所看到的，当帮助文本很短时，它看起来不错，但是当它溢出时，它会下降到底部，使其看起来不一致。

如何使用一种3列布局强制将长帮助文本保留在表单的右侧？或者如果溢出到底部，可能会创建一个更大的上边距？最好是，我希望保持所有响应，以便较小的屏幕不会受到负面影响。

Answer 1

您可以使用媒体查询在小屏幕上的文本输入下方显示它们：

@media only screen and (max-width: 480px) {
  .help-inline {
    display: block;
    float: none;
  }
}

Answer 2

这就是诀窍。

.hil {
    width:200px;   
}

<span class='help-inline hil'> Long Text </span>

见下面的图片