Question

考虑以下代码

!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）为什么复选框的字体大小正确（按body标签），但是编辑字段却忽略了它，并以较大的字体显示？

2）但是，最后一个字段（已解冻的日期）以正确的大小显示。为什么？

3）为什么使用容器流体，所有东西都对准窗口的边缘，并且如何在不更改为普通容器的情况下解决该问题？

4）当显示在我的服务器上时，即使每个表单组都分配给一行，它们也会在另一个表单组下面显示？如何使它们并排出现？水平表单标记似乎已被忽略。

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

0 个答案: