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

请参阅下面的图片