带图标的CSS引导3.0字段

带图标的CSS引导3.0字段,css,twitter-bootstrap,twitter-bootstrap-3,Css,Twitter Bootstrap,Twitter Bootstrap 3,我有一个表单,有3个字段,其中两个用于输入日期。我被要求在字段的最后添加一个图标 结果是: 如果你看到有图标的字段在其他字段的左边和右边展开,那么它看起来很难看 代码如下: <div class="form-horizontal"> <div class="form-group"> <label class="col-md-4 control-label">Begin</label> <div cl

我有一个表单,有3个字段,其中两个用于输入日期。我被要求在字段的最后添加一个图标

结果是:

如果你看到有图标的字段在其他字段的左边和右边展开,那么它看起来很难看

代码如下:

<div class="form-horizontal">

    <div class="form-group">
        <label class="col-md-4 control-label">Begin</label>
        <div class="col-md-8">
            <input type="text" class="form-control" placeholder="mm/dd/yyyy" />

        </div>
    </div>

    <div class="form-group">
        <label class="col-md-4 control-label">End</label>
        <div class="input-group col-md-8">
            <input type="text" class="form-control" placeholder="mm/dd/yyyy" />
            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-4 control-label">Text Search</label>
        <div class="col-md-5">
            <input type="text" class="form-control">

        </div>
        <div class="col-md-3">

            <button id="btnSavedMessages" class="btn btn-primary">Search</button>
        </div>
    </div>

</div>

开始
终点
文本搜索
搜寻
有没有关于如何正确操作的线索


一些CSS正在干扰你。 您与输入组col-md-8的线路显然出现故障。 我举了一个例子:


检查您是否有一些覆盖引导的自定义CSS。

这是您的固定代码,请复制并粘贴它

<div class="form-horizontal">

<div class="form-group">
    <label class="col-md-4 control-label">Begin</label>
    <div class="col-md-8">
        <input type="text" class="form-control" placeholder="mm/dd/yyyy">

    </div>
</div>

<div class="form-group">
    <label class="col-md-4 control-label">End</label>
    <div class="col-md-8">
      <div class="input-group ">
        <input type="text" class="form-control" placeholder="mm/dd/yyyy">
        <span class="input-group-addon"><i class="fa fa-lock"></i></span>
    </div></div>
</div><div class="form-group">
    <label class="col-md-4 control-label">Text Search</label>
    <div class="col-md-5">
        <input type="text" class="form-control">
    </div>
    <div class="col-md-3">
        <button id="btnSavedMessages" class="btn btn-primary">Search</button></div></div></div>

开始
终点
文本搜索
搜寻

我已经测试过了,效果很好。干杯

使用我的代码这工作正常


开始
终点
文本搜索
搜寻

文档会告诉您如何执行此操作。。。