twitter-bootstrap - 如何将复选框与引导程序中的其他元素相关联?
问题描述
考虑以下代码
!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans" />
<style>
body {
font-family: "Open Sans";
font-size: 12px;
}
</style>
<script>
$( document ).ready(function()
{
});
</script>
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="py-5 text-center">
<img class="d-block mx-auto mb-4" alt="" width="72" height="72">
<p class="lead">Search</p>
</div>
<form class="needs-validation form-horizontal" action="search.php" onsubmit="$(this).find('input').prop('disabled', false)" method="post">
<div class="form-row">
<div class="form-group col-md-3 mb-3">
<h5>Strains</h5>
</div>
</div>
<div class='form-row'>
<div class=' col-md-3 mb-3'>
<div class="form-group">
<input type='checkbox' class='custom-control-input' id='strainName_chkboxID' name='strainName_chkbox_htmlName'>
<label class='custom-control-label' for='strainName_chkboxID'>strain name</label>
<input type='text' id='strain_nameID' class='form-control' name='strainName_htmlName' required title='strain name'>
</div>
<div class="form-group">
<input type='checkbox' class='custom-control-input' id='isolationName_chkboxID' name='isolationName_chkbox_htmlName'>
<label class='custom-control-label' for='isolationName_chkboxID'>isolation name</label>
<input type='text' id='isolationNameID' class='form-control' name='isolationName_htmlName' required title='isolation name'>
</div>
<div class="form-group">
<input type='checkbox' class='custom-control-input' id='dateFrozen_chkboxID' name='dateFrozen_chkbox_htmlName'>
<label class='custom-control-label' for='dateFrozen_chkboxID'>date frozen</label>
<input type='date' id='dateFrozenID' class='form-control' name='dateFrozen_htmlName' required title='date frozen'>
</div>
<div class="form-group">
<input type='checkbox' class='custom-control-input' id='dateThawed_chkboxID' name='dateThawed_chkbox_htmlName'>
<label class='custom-control-label' for='dateThawed_chkboxID'>date thawed</label>
<input type='date' id='dateThawedID' class'form-control' name='dateThawed_htmlName' required title='date thawed'>
</div>
</div>
</div>
</div>
</body>
问题
1)为什么复选框的字体大小正确(根据正文标签),但编辑字段忽略了这一点并以更大的尺寸显示?
2) 最后一个字段,解冻日期,但是,以正确的大小显示。为什么?
3)为什么使用容器流体,所有东西都与窗口边缘对齐,我怎样才能在不改变为普通容器的情况下解决这个问题?
4)当显示在我的服务器上时,每个表单组在另一个下方显示一个,即使它们被分配到一行?我怎样才能让它们并排出现?form-horizontal 标签似乎被忽略了。
解决方案
推荐阅读
- node.js - 两个正在搜索匹配项的随机用户的匹配算法 - Mongo、Redis、NodeJs
- batch-file - 如何将登录中的特定搜索行打印到单独的文本文件中?
- java - 我可以修改 Autowired Singleton 范围 bean 的属性并为整个应用程序设置该值吗?
- swagger - 显示时间组件/错误格式的 Swashbucke 日期示例
- ionic-framework - Ionic3 视频集成在网络上不起作用
- javascript - 我想访问如下定义的对象数组
- elasticsearch - 带过滤器的 Elasticsearch 查询比不带过滤器的查询花费更多时间。为什么?
- arrays - 将数组元素分配给在堆内存中创建的数组
- jenkins - Jenkins BlueOcean 停留在“待处理的管道创建”。
- java - 为什么我得到“错误:无法找到或加载主类 mysql-connector-java-8.0.19.jar”?