添加<label>标记会导致文本框图标移动到新行。怎么预防这个？

Question

我使用默认的Bootstrap 3 css但是当我在文本框旁边放置一个图像标签时，它不会显示在它旁边，而是在一个新行上呈现。

这是小提琴：https://jsfiddle.net/d234/cn8e55m0/6/

 <div class="container body-content">
    <h2>Edit</h2>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h1 class="panel-title">
                Month
            </h1>
        </div>
        <div class="panel-body">
            <div class="form-horizontal">
                <div class="form-group">
                    <label class="col-md-2 control-label" for="MonthStartDate">Month Start Date</label>
                    <div class="col-md-10">
                        <div class="input-group date">

                            <input class="form-control datepicker hasDatepicker" data-val="true" id="MonthStartDate" name="MonthStartDate" type="text"></input>
                            <label  for="MonthStartDate">
                                <span class="input-group-addon" style="cursor: pointer;">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span> 
                            </label>
                            <span class="field-validation-valid text-danger" data-valmsg-for="MonthStartDate" data-valmsg-replace="true"></span>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

请注意：我必须在我的图像范围内添加一个标签，以便触发一个日期选择器弹出窗口，所以我不能只删除它。但是，当该标签打开和关闭标签时，它会正确呈现。

我怎样才能拥有标签但是能正确渲染？

Answer 1

我有两个标签。两人都有     for="MonthStartDate

似乎第二个人继承了第一个col-md-2，导致它出现在第一行。

将for="unique"重命名为唯一值，修复了我的问题