html - 引导日期选择器和时间选择器字形未正确对齐
问题描述
我正在使用 bootstrap-datepicker.js 和 bootstrap-timepicker.js 在 Bootstrap 4 中创建日期选择器和时间选择器。问题是日历和时间图标显示不正确。我希望它们位于输入按钮内,但它出现在输入框下方。
<div class="col-md-3 columns">
<label>Date:</label>
<input data-date-format="dd/mm/yyyy" id="datepicker">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<div class="col-md-2 columns">
<label>Time:</label>
<input id="timepicker1" type="text" >
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
这些是我的 CSS 和 Javascript 文件。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
解决方案
要显示除输入字段之外的按钮,您需要将输入和按钮包装在.input-group
类中,如下所示:
<div class="col-md-2 columns">
<div class="input-group">
<label>Time:</label>
<input id="timepicker1" type="text" >
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
缺少图标,因为字形图标已从 Bootstrap 4 中删除,因此您需要单独加载它们。
推荐阅读
- javascript - 如何从对象数组中获取唯一的日期值
- haskell - 为什么我会收到解析错误,如何在 haskell 中解决此错误?
- amazon-web-services - 在 AWS CodePipeline 中为蓝/绿部署指定 AWS CodeDeploy 目标实例
- java - java.lang.Error:致命异常 Google Play Android 10
- javascript - jQuery ajax 输入字段事件、选项列表和设置值
- python - 从一个表中选择在另一个表中具有相似数据的数据
- docker - 为什么 docker exec 不返回?
- azure - azure function V2 c# scipt - 从 azure 表中获取实体
- mysql - Mysql 查询每个条件只提供一个(最高等级)
- pip - 无法在 Colab 上永久安装 Fastai 库