我最近开始尝试用Bootstrap做一些前端工作，发现它很棘手。
有两个问题here。
1.日历标志符号出现在日期输入下。它的意思是在它的末尾，并在同一'行'
1.选择器是为了自动关闭，但这并没有发生
任何帮助都是受欢迎的。错误页面的代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Add Job</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<!--
<script src="/bootstrap.min.js"></script>
-->
<script src="/bootstrap.min.js"></script>
<script src="/jquery-3.7.0.min.js"></script>
<script src="/bootstrap-datepicker.min.js"></script>
<!--<link href="css/bootstrap-datepicker3.min.css" rel="stylesheet"/>-->
<link href="css/datepicker.css" rel="stylesheet"/>
<link href="css/all.min.css" rel="stylesheet"/>
</head>
<body>
<script type="text/javascript">
$('#datepicker').datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
todayHighlight: true});
</script>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Jobs</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/newjobform">Add Job</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">View</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/jobslastten">Last jobs</a></li>
<li><a class="dropdown-item" href="/jobs">All jobs</a></li>
<li><a class="dropdown-item" href="/jobsnext">Next jobs</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="page-header" id="banner">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-6">
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-6">
<h1>Add a Job</h1>
<form action="/addjob" method="post"
enctype="multipart/form-data" class=
"form-horizontal">
<fieldset>
<div class="form-group" data-provide="datepicker">
<label class="col-lg-3 control-label">
Date</label>
<input type="text" placeholder="YYYY-MM-DD" class="form-control">
<span class="input-group-append input-group-addon"><span class="input-group-text"><i class="fa fa-calendar"></i></span></span>
<!--
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
-->
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Place
</label>
<div class="col-lg-9">
<input type="text" class="form-control" name=
"place" />
</div>
</div>
<div class="form-group">
<label class=
"col-lg-3 control-label">Amount</label>
<div class="col-lg-9">
<input type="text" class="form-control" name=
"amount" />
</div>
</div>
<div class="form-group">
<div class="col-lg-12 col-lg-offset-3">
<button type="submit" class="btn btn-primary"
name="button">Create</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>字符串
1条答案
按热度按时间kkbh8khc1#
要使Font Awesome图标向右浮动，同时保持内联，需要用
input-group类的div Packageinput-group-append类的文本框和div。我还删除了input-group-addon类，因为自Bootstrap 3以来它已经过时/被替换了。从
form-group类的div中删除data-provide="datepicker"属性确保了日期选择器将自动关闭。我注意到你在jQuery之前加载Bootstrap JS文件，所以你需要改变顺序，因为Bootstrap依赖于jQuery。
个字符