Question

我是bootStrap和Html的新手。我目前正在使用Bootstrap 3 Datepicker，我遇到了问题。 glyphicon-calendar图标与输入文本框分开。我该如何解决？这是我的问题和我的代码的屏幕截图。另外，如果你设法解决我的问题，你能解释一下你如何解决它吗？我想了解更多。

Screenshot of my problem

$(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查看输出

//header.html
<div th:fragment="header">
<!-- related code of header file >
</div>



//index.html
//to include header follow the code( the header file is inside includes directory) 
<div th:replace="/includes/header :: header"> </div>

BootStrap glyphicon-calender图标与输入文本框分开

1 个答案: