bootstrap 2.2.2 inline-help不显示在中间

时间:2013-01-20 16:01:11

标签: twitter-bootstrap

代码问题是什么?请参阅jsfiddle  1.内联帮助不显示在中间。
 2.当我滚动窗口时,内联帮助边距不正确。

http://i.stack.imgur.com/8oCG5.jpg

        <form class="well  ">
        <div class="controls controls-row ">
            <input type="text" placeholder="Name" class="span5 ">
            <span class="help-inline">Please Enter Small Name.</span>
        </div>
        <div class="controls controls-row">
            <input type="text" placeholder=".span5" class="span5">
        </div>
        <div class="controls controls-row">
            <input type="text" placeholder=".span4" class="span4">
            <input type="text" placeholder=".span1" class="span1">
        </div>
        <div class="controls controls-row">
            <input type="text" placeholder=".span3" class="span3">
            <input type="text" placeholder=".span2" class="span2">
        </div>
        <div class="controls controls-row">
            <input type="text" placeholder=".span2" class="span2">
            <input type="text" placeholder=".span3" class="span3">
        </div>
        <div class="controls controls-row">
            <input type="text" placeholder=".span1" class="span1">
            <input type="text" placeholder=".span4" class="span4">
        </div>
    </form>

2 个答案:

答案 0 :(得分:1)

              <form class="well  ">
                    <div class="controls controls-row ">
                      <input type="text" placeholder=".spanName">
                      <span class="help-inline">Inline help text</span>
                    </div>
                    <div class="controls controls-row">
                        <input type="text" placeholder=".span5" class="span5">
                    </div>
                    <div class="controls controls-row">
                        <input type="text" placeholder=".span4" class="span4">
                        <input type="text" placeholder=".span1" class="span1">
                    </div>
                    <div class="controls controls-row">
                        <input type="text" placeholder=".span3" class="span3">
                        <input type="text" placeholder=".span2" class="span2">
                    </div>
                    <div class="controls controls-row">
                        <input type="text" placeholder=".span2" class="span2">
                        <input type="text" placeholder=".span3" class="span3">
                    </div>
                    <div class="controls controls-row">
                        <input type="text" placeholder=".span1" class="span1">
                        <input type="text" placeholder=".span4" class="span4">
                    </div>
                </form>

您在输入中使用了一个类(class =“span5”,它太大而无法获得内联帮助,因此我建议您为内联帮助工作设置常规大小。 我想这就是你想要的

答案 1 :(得分:1)

.help-inline类只能在附加了.form-horizontal类的表单和缺少表单的.control-group容器的上下文中正常工作。您可以通过将.help-inline阻止自己与某些负边距对齐或正确设置表单以使用.form-horizontal类以及正确的.control-group容器来解决此问题。