Значок глифона-календаря BootStrap отделен от входного текстового поля

Question

Я новичок в bootStrap и HTML.В настоящее время я использую Bootstrap 3 Datepicker, и у меня есть проблема.Значок глификон-календаря отделен от текстового поля ввода.Как это исправить?Вот скриншот моей проблемы и мои коды.Кроме того, если вам удастся решить мою проблему, можете ли вы объяснить, как вы ее решаете?Я хотел бы узнать больше.

Снимок экрана моей проблемы

$(function () {
        $('#datepicker1').datepicker();
    });

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class='input-group date' id='datepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

это правильный код, просто добавьте этот загрузчик js и css, чтобы увидеть вывод

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class='input-group date' id='datepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>