带有自举程序的日期选择器对齐的问题

Question

我正在尝试对齐输入控件，并且遇到对齐问题。这是我尝试创建UI设计的代码片段，我需要在每组输入控件周围创建带有矩形边框/容器的UI，并让我知道是否可以使用Booststrap实现类似的功能。。

在上图中，“日历图标”没有在“日期”文本框旁边移动，并推动了其他导致对齐问题的控件。我也有模拟设计。

    <div class="container-fluid bg-3 text-center">
  <form>
        <div class="form-row">

            <div class=" form-group date col-md-2 ">
                <label for="DateFrom">Date From</label>

                <input type="text" class="form-control" id="DateFrom">
                <span class="form-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>

            </div>
            <div class="form-group date  col-md-2">
                <label for="Dateto">Date To</label>
                <input type="text" class="form-control" id="Dateto">
                <span class="form-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>

            <div class=" form-group col-md-2 ">
                <label for="DD1">Dropdown1</label>
                <select class="form-control" id="DD1">
                    <option selected value=All>All</option>
                    <option value=Val1>Val1</option>
                    <option value=Val2>Val2</option>
                </select>
            </div>

            <div class=" form-group col-md-3 ">
                <label for="DD2">Dropdwon2</label>
                <select class="form-control" id="DD2">
                    <option value=All>All</option>
                    <option value=val1>val1</option>
                    <option value=val2>val2</option>

                </select>
            </div>
            <div class=" form-group col-md-3 ">
                <label for="DD3">Dropdown3</label>
                <select class="form-control" id="disposition">
                    <option value=All>All</option>
                </select>
            </div>
        </div>
        <div class="form-row">

            <div class=" form-group col-md-2">
                <label for="Date">Date</label>
                <label class="radio-inline"><input type="radio" name="dateradio" checked>Start Date</label>
                <label class="radio-inline"><input type="radio" name="dateradio">End Date</label>
            </div>
            <div class="form-group col-md-2">
                <label for="dd4">Dropdown4</label>
                <select class="form-control" id="dd4">
                    <option selected value=All>All</option>
                </select>
            </div>
            <div class=" form-group col-md-2 ">
                <label for="DDl5">Dropdowmn5</label>
                <select class="form-control" id="DDl5">
                    <option value=All>All</option>

                </select>
            </div>

            <div class=" form-group col-md-2">
                <label for="Dsply">Display</label>
                <label class="radio-inline"><input type="radio" name="Dsply" checked>Val1</label>
                <label class="radio-inline"><input type="radio" name="Dsply">Val2</label>
            </div>
        </div>
        <div class="form-row">

            <div class=" form-group col-md-2">
                <button type="button" class="btn btn-success" >btn1</button>
            </div>
            <div class="form-group col-md-2">
                <button type="button" class="btn btn-success" >btn2</button>
            </div>
            <div class=" form-group col-md-2 ">
                <button type="button" class="btn btn-success" >btn3</button>
            </div>

            <div class=" form-group col-md-2">
                <button type="button" class="btn btn-primary" >btn4</button>
            </div>
        </div>
    </form>
</div>

请找到样机设计和预期输出您能否让我知道如何解决对齐问题，以及如何将“日历图标”的下一个/向右移动到日期文本框并获取输入控件周围的边框。