Twitter bootstrap 如何将复选框与引导中的其他元素关联？_Twitter Bootstrap

Twitter bootstrap 如何将复选框与引导中的其他元素关联？

twitter-bootstrap

Twitter bootstrap 如何将复选框与引导中的其他元素关联？,twitter-bootstrap,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/boot

考虑以下代码

!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>

！DOCTYPE html>
身体{
字体系列：“开放式SAN”；
字体大小：12px；
}
$（文档）.ready（函数（）
{
});
搜索
紧张
品系名称
隔离名称
冻结日期
解冻日期

问题

1）为什么复选框的字体大小是正确的（根据body标记），但编辑字段忽略了这一点并以更大的大小显示

2）但是，最后一个字段“解冻日期”显示的大小正确。为什么?

3）为什么使用容器流体时，所有东西都与窗口边缘对齐，我如何在不更改为普通容器的情况下修复它

4）在“我的服务器”上显示时，每个表单组显示在另一个表单组的下方，即使它们被分配到一行？我怎样才能让他们并排出现？表单水平标记似乎被忽略。

我为每个表单组提供了一个列div，从而使它跨4列显示，但这会导致复选框与编辑字段重叠。如何修复？您可以在上看到正在运行的代码。这已被更新，以显示“超大”编辑字段的重叠问题，最后一个除外。错误大小的项是由于“class'form-control”，应该是“class='form-control”。我发现有一种方法可以使用输入附加标记将复选框与输入绑定，但我在这里尝试做的仍然是需要标签的地方。例如，对于日期字段。由于

class'form-control'

（应该是

class='form-control'

）的原因，您声称以正确大小显示的最后一个字段无效。因此，未应用类

窗体控件。你所说的“显示器尺寸合适”是什么意思？