Question

使用Bootstrap CSS 3.3.1，输入带有插件和帮助块时出现了一些问题。

在Firefox / Chrome上测试过。标记错了吗？我试过＆＃34;输入组＆＃34; ......没有成功的课程

这是标记：

<div class="form-group">
    <label for="title" class="control-label col-md-3">Titre de la page</label>
    <div class="col-md-9 input-group">
        <div class="input-group-addon">
            @
        </div>
        <input type="text" value="Value test" class="form-control input-xxlarge" id="title" name="title" size="46" />
            <span class="help-block">Help Lorem Ipsum</span>
    </div>
</div>

Answer 1

试试这样：

<div class="form-horizontal">
    <div class="form-group">
        <label for="title" class="control-label col-sm-3">Titre de la page</label>
        <div class="col-sm-9">
            <div class="input-group">
              <span class="input-group-addon">@</span>
                <input type="text" id="title" name="title"  class="form-control" />
            </div>
            <p class="help-block">Example block-level help text here.</p>
        </div>
    </div>
</div>

请参阅this updated fiddle

（拉伸预览窗格以查看列支持）

Answer 2

可以接受已接受的答案，但如果您仍然需要help-block内的input-group（我需要它来支持我的工作javascript来显示内联错误），有一种解决方法可以修复问题并且具有跨浏览器支持。

.input-group .help-block{
  display: table-row;
}

这里是小提琴：https://jsfiddle.net/L4joxj90/2/ （这只有一个限制，我们不能在输入字段的左侧使用input-group-addon）

带有插件和帮助块的Bootstrap 3输入

2 个答案: