如何並排顯示單獨的 forms

Question

我正在使用 css 樣式表和引導程序構建一個 PHP 表單。 我希望某些字段顯示在自己的獨立左側容器/表單中，而其他字段則顯示在右側的獨立容器表單中。 此表格不會用於移動設備，因此我有足夠的寬度可以玩。

下面是我編寫的表單代碼示例，所有內容都堆疊在一起。 如何讓這些部分並排顯示而不是彼此堆疊？

我是 php、bootstrap 等的新手，所以答案越詳細越好。

<form>

<div class="row mb-2">
    <label for="Task" class="col-sm-2 col-form-label">Repair Task</label>
        <div class="col-sm-10">
    <select id="Task" class="form-select">
      <option selected>Choose...</option>
      <option>BACKUP ONLY</option>
      <option>DE-INSTALL</option>
      <option>DIAGNOSTIC</option>
      <option>INSTALL-SETUP</option>
      <option>PART INSTALL / SWAP</option>
      <option>PICKUP / DELIVERY</option>
      <option>REMOTE SUPPORT</option>
      <option>REPAIR</option>
      <option>SITE SURVEY</option>
      <option>UPGRADE</option>
    </select>
</div>

<div class="row mb-2">
    <label for="NewCustomer" class="col-sm-9 col-form-label">New Customer?</label>
        <div class="col-auto">
        <select id="NewCustomer" class="form-select">
      <option selected>Choose...</option>
      <option>YES</option>
      <option>NO</option>
    </select>
</div>

<div class="row mb-2">
    <label for="Backup" class="col-sm-11 col-form-label">Does Customer Need a Backup if We Reload?</label>
            <div class="col-auto">
    <select id="Backup" class="form-select">
      <option selected>Choose...</option>
      <option>YES</option>
      <option>NO</option>
    </select>
</div>

<div class="row mb-2">
  <label for="ProblemDescription" class="col-sm-5 col-form-label">Problem Description</label>
      <div class="col-sm-12">
  <textarea class="form-control" id="ProblemDescription" rows="3"></textarea>
</div>

  <div class="row mb-2">
    <label for="Company" class="col-sm-2 col-form-label">Company Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="Company">
    </div>
  </div>



  <fieldset class="row mb-2">
    <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>

  <button type="submit" class="btn btn-primary">Save Ticket</button>
</form>    
</div>
  </div>
  </div>
  

<form2>

<?php 

$month = date('m');
$day = date('d');
$year = date('Y');


$today = $year . '-' . $month . '-' . $day;
?>

    <div class="row mb-2">
    <label for="TicketNumber " class="col-sm-2 col-form-label">Ticket Number</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="TicketNumber " readonly>
    </div>
  </div>

<div class="row mb-2">
    <label for="DateAdded" class="col-sm-2 col-form-label">Date Created</label>
      <div class="col-sm-10">
    <input type="date" value="<?php echo $today; ?>" class="form-control" id="DateAdded" name="DateAdded" readonly>
</div>

<div class="row mb-2">
    <label for="DateEdited" class="col-sm-2 col-form-label">Date Last Edited</label>
      <div class="col-sm-10">
    <input type="date" value="<?php echo $today; ?>" class="form-control" id="DateEdited" name="DateEdited" readonly>
</div>

    <div class="row mb-2">
    <label for="CustomerNumber" class="col-sm-2 col-form-label">Customer Number</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="CustomerNumber" readonly>
    </div>
  </div>

      <div class="row mb-2">
    <label for="SortOrder" class="col-sm-2 col-form-label">Sort Order</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="SortOrder" readonly>
    </div>
  </div>

    <div class="row mb-2">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="DoNotEmail">
        <label class="form-check-label" for="DoNotEmail">
          Do Not Email
        </label>
      </div>
    </div>
  </div>

<div class="row mb-2">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="DoNotMail">
        <label class="form-check-label" for="DoNotMail">
          Do Not Mail
        </label>
      </div>
    </div>
</div>

</form2>    
</div>
  </div>
  </div>

Answer 1

我修改了你的代碼如下：

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- <link rel="icon" type="image/png" href="{% static 'images/icon.png' %}" /> -->
  <link rel="icon" type="image/png" href="#" />
  <title>MySite</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
    integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
    integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
    crossorigin="anonymous"></script>
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-6 mt-3">
        <form>
          <div class="container">
            <div class="row mb-2">
              <label for="Task" class="col-sm-4 col-form-label">Repair Task</label>
              <div class="col-sm-8">
                <select id="Task" class="form-select">
                  <option selected>Choose...</option>
                  <option>BACKUP ONLY</option>
                  <option>DE-INSTALL</option>
                  <option>DIAGNOSTIC</option>
                  <option>INSTALL-SETUP</option>
                  <option>PART INSTALL / SWAP</option>
                  <option>PICKUP / DELIVERY</option>
                  <option>REMOTE SUPPORT</option>
                  <option>REPAIR</option>
                  <option>SITE SURVEY</option>
                  <option>UPGRADE</option>
                </select>
              </div>
            </div>

            <div class="row mb-2">
              <label for="NewCustomer" class="col-sm-8 col-form-label">New Customer?</label>
              <div class="col-sm-4">
                <select id="NewCustomer" class="form-select">
                  <option selected>Choose...</option>
                  <option>YES</option>
                  <option>NO</option>
                </select>
              </div>
            </div>

            <div class="row mb-2">
              <label for="Backup" class="col-8 col-form-label">Does Customer Need a Backup if We Reload?</label>
              <div class="col-12">
                <select id="Backup" class="form-select">
                  <option selected>Choose...</option>
                  <option>YES</option>
                  <option>NO</option>
                </select>
              </div>
            </div>

            <div class="mb-2">
              <label for="ProblemDescription" class="col-sm-5 col-form-label">Problem Description</label>
              <div class="col-sm-12">
                <textarea class="form-control" id="ProblemDescription" rows="3"></textarea>
              </div>
            </div>

            <div class="row mb-2 mt-2">
              <label for="Company" class="col-sm-2 col-form-label">Company Name</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="Company">
              </div>
            </div>


            <fieldset class="mb-2">
              <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
              <div class="col-sm-10">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1"
                    checked>
                  <label class="form-check-label" for="gridRadios1">
                    First radio
                  </label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
                  <label class="form-check-label" for="gridRadios2">
                    Second radio
                  </label>
                </div>
                <div class="form-check disabled">
                  <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3"
                    disabled>
                  <label class="form-check-label" for="gridRadios3">
                    Third disabled radio
                  </label>
                </div>
              </div>
            </fieldset>
            <div class="d-grid gap-2">
              <button type="submit" class="btn btn-primary">Save Ticket</button>
            </div>
          </div>
        </form>
      </div>

      <div class="col-6 mt-3">
        <form>

          <?php 

$month = date('m');
$day = date('d');
$year = date('Y');


$today = $year . '-' . $month . '-' . $day;
?>
          <div class="container">
            <div class="row mb-2">
              <label for="TicketNumber " class="col-sm-3 col-form-label">Ticket Number</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="TicketNumber " readonly>
              </div>
            </div>

            <div class="row mb-2">
              <label for="DateAdded" class="col-sm-3 col-form-label">Date Created</label>
              <div class="col-sm-9">
                <input type="date" value="<?php echo $today; ?>" class="form-control" id="DateAdded" name="DateAdded"
                  readonly>
              </div>
            </div>
            <div class="row mb-2">
              <label for="DateEdited" class="col-sm-3 col-form-label">Date Last Edited</label>
              <div class="col-sm-9">
                <input type="date" value="<?php echo $today; ?>" class="form-control" id="DateEdited" name="DateEdited"
                  readonly>
              </div>
            </div>
            <div class="row mb-2">
              <label for="CustomerNumber" class="col-sm-3 col-form-label">Customer Number</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="CustomerNumber" readonly>
              </div>
            </div>

            <div class="row mb-2">
              <label for="SortOrder" class="col-sm-3 col-form-label">Sort Order</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="SortOrder" readonly>
              </div>
            </div>

            <div class="row mb-2">
              <div class="col-sm-10">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="DoNotEmail">
                  <label class="form-check-label" for="DoNotEmail">
                    Do Not Email
                  </label>
                </div>
              </div>
            </div>

            <div class="row mb-2">
              <div class="col-sm-10">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="DoNotMail">
                  <label class="form-check-label" for="DoNotMail">
                    Do Not Mail
                  </label>
                </div>
              </div>
            </div>
          </div>

        </form>
      </div>
    </div>
  </div>

</body>

</html>

最后看起來像這樣：