从一种形式“卡片”切换到另一种形式后出现对齐问题

问题描述 投票：0回答：1

我创建了这个表单页面，它允许您搜索元素并将其插入数据库。很简单，有两个按钮“ricerca”（搜索）和“inserimento”（插入），每个按钮打开一张不同的“引导卡”。每张卡片都包含一个表格。我无法解释为什么当我单击插入按钮时，所有元素都会稍微向左移动。

你能猜出为什么吗？

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  <script
              src="https://code.jquery.com/jquery-3.6.4.js"
              integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
              crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.it.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">


<style>
  
body {
    text-align: center;
}


.gruppo-2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


</style>

</head>
<body>

<p>Benvenuto<br><br></p>


<button type='button' class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#ricerca" aria-expanded="false" aria-controls="collapse-b1">Ricerca <i class="bi bi-search"></i></button>
<button type='button' class="btn btn-warning" data-bs-toggle="collapse" data-bs-target="#inserimento" aria-expanded="false" aria-controls="collapse-b1">Inserimento <i class="bi bi-plus-circle"></i></button>


<br><br><br>



<div id="myGroup">


<div class="collapse" id="ricerca" data-bs-parent="#myGroup">
    <div class="gruppo-1">
      <div class="row">
        <div class="col-md-6 offset-md-3">
            <form method="get" action='DBsearch.php' class = 'card p-3 bg-light'>
            <label class="control-label " for="Postazioni">
            <b>Postazione:</b>
            </label>
            <select class="form-select" id="PostazioniS" name="Postazioni" type='search'>
            <option value="" disabled selected selected hidden>Seleziona...</option>
            <option value="Tutte">Tutte</option>


            </select>

            <div class="flex-container">

            <label class="control-label" for="Data">
            <p><b>Da:</b></p>
            </label>

            <input class="form-control" id="Data" name="Data" placeholder="AAAA/MM/GG" type="text"/>

            <label class="control-label" for="DataA">
            <p><b>A:</b></p>
            </label>

            <input class="form-control" id="DataA" name="DataA" placeholder="AAAA/MM/GG" type="text"/>


            <button class="btn btn-primary " name="submit" type="submit">
                <b>Cerca</b>
            </button>
            </div>

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



  <div class="collapse" id="inserimento" data-bs-parent="#myGroup">
      <div class="gruppo-2">
          <form method="get" action='DBinsert.php'>
            <div class="card p-3 bg-light">
              <div class="card-body">
              <div class= 'row g-3'>
                <div class="col-md-12">
                <label class="control-label " for="Postazioni">
                <b>Postazione:</b>
                </label>
                <select class="form-select" id="Postazioni" name="Postazioni" type='number' required>
                <option value="" disabled selected selected hidden>Seleziona...</option>
                </select>
                </div>

                <div class="col-6">
                <label class="control-label " for="Data2">
                <b>Data:</b>
                </label>
                <input class="form-control" id="Data2" name="Data2" placeholder="AAAA/MM/GG" type="text" required/>
                </div>
                
                <div class="col-6">
                <label class="control-label" for="Ora">
                <b>Ora:</b>
                </label>
                <input class= "form-control" type="time" id="Ora" name="Ora" required/>
                </div>

                <div class="col-md-12">
                <label class="control-label " for="Verbale">
                <b>Tipo di verbale:</b>
                </label>
                <select class="form-select" id="Verbale" name="Verbale" type='text' required>
                <option value="" disabled selected selected hidden>Seleziona...</option>
                </select>
                </div>


                <div class="col-6">
                <label class="control-label " for="NSet">
                <b>Set:</b>
                </label>
                <select class="form-select" id="NSet" name="NSet" type='number' required>
                <option value="" disabled selected selected hidden>Seleziona...</option>
                </select>
                </div>

                <div class="col-6">
                <label class="control-label " for="Flash">
                <b>Flash:</b>
                </label>
                <select class="form-select" id="Flash" name="Flash" type='number' required>
                <option value="" disabled selected selected hidden>Seleziona...</option>
                </select>
                </div>

                <div class="col-md-12">
                <label for="text" class="col-4 col-form-label"><b>Protocollo:</b></label> 
                <input id="Protocollo" name="Protocollo" type="text" class="form-control" required>
                </div>

                <div class="col-6">
                <label for="text" class="col-4 col-form-label"><b>Scatti da:</b></label> 
                <input id="ScattiDa" name="ScattiDa" type="text" class="form-control" required>
                </div>

                <div class="col-6">
                <label for="text" class="col-4 col-form-label"><b>a:</b></label> 
                <input id="ScattiA" name="ScattiA" type="text" class="form-control" required>
                </div>
                </div>
            </div>
          </div>
          <br>
          <div class="card p-3 bg-warning mb-3" id='notShown' style='display: none;'>
            <h5>SCARICO DATI</h5>
              <div class="card-body">
              <div class= 'row g-3'>

                <div class="col-6">
                <label class="control-label " for="DataCartelleDa">
                <b>Data cartelle da:</b>
                </label>
                <input class="form-control" id="DataCartelleDa" name="DataCartelleDa" placeholder="AAAA/MM/GG" type="text" required/>
                </div>

                <div class="col-6">
                <label class="control-label " for="DataCartelleA">
                <b>Data cartelle a:</b>
                </label>
                <input class="form-control" id="DataCartelleA" name="DataCartelleA" placeholder="AAAA/MM/GG" type="text" required/>
                </div>

                <div class="col-12">
                <label for="text" class="col-4 col-form-label"><b>Numero Cartelle:</b></label> 
                <input id="NumeroCartelle" name="NumeroCartelle" type="text" class="form-control" required>
                </div>

                <div class="col-6">
                <label class="control-label " for="DataScarico">
                <b>Data Scarico:</b>
                </label>
                <input class="form-control" id="DataScarico" name="DataScarico" placeholder="AAAA/MM/GG" type="text" required/>
                </div>

                <div class="col-6">
                <label class="control-label" for="OraScarico">
                <b>Ora Scarico:</b>
                </label>
                <input class= "form-control" type="time" id="OraScarico" name="OraScarico" required/>
                </div>
              </div>
            </div>
          </div>
          <br>
          <div class="card p-3 bg-light">
          <h5>VERBALIZZANTI E NOTE</h5>
              <div class="card-body">
                <div class= 'row g-3'>
                <div class="col-6">
                <label class="control-label " for="Agente 1">
                <b>Agente 1:</b>
                </label>
                <select class="form-select" id="Agente1" name="Agente1" type='number' required>
                <option value="" disabled selected selected hidden>Seleziona...</option>
                </select>
                </div>

                <div class="col-6">
                <label class="control-label " for="Agente 2">
                <b>Agente 2:</b>
                </label>
                <select class="form-select" id="Agente2" name="Agente2" type='number' required>
                </select>
                </div>

                <div class="col-md-12">
                <label for="text" class="col-4 col-form-label"><b>Note:</b></label> 
                <input id="Note" name="Note" type="text" class="form-control">
                </div>

                <div class="col-12">
                <button class="btn btn-warning" name="submit" type="submit">
                Inserisci
                </button>
              </div>
              </div>
              </div>

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


</body>
</html>

通过删除“inserimento”卡片中的一些元素，问题就解决了，两张卡片仍然保持居中对齐。

我无法解释为什么。

html css
1个回答
0
投票

“inserimento”卡片太高，导致垂直溢出，显示垂直滚动条。这就是为什么当您删除该卡中的某些元素时，问题似乎已“解决”。您可以尝试通过将 

overflow-y: scroll;
添加到 
body
来修复此问题，而不删除卡片内容。这使得垂直滚动条始终显示，丑陋，我知道，但它不会再推动事情了。

<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

  <!-- Bootstrap Date-Picker Plugin -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.it.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">


  <style>
    body {
      text-align: center;
      overflow-y: scroll;
    }
            
    .gruppo-2 {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
    }
  </style>

</head>

<body>

  <p>Benvenuto<br><br></p>


  <button type='button' class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#ricerca" aria-expanded="false" aria-controls="collapse-b1">Ricerca <i class="bi bi-search"></i></button>
  <button type='button' class="btn btn-warning" data-bs-toggle="collapse" data-bs-target="#inserimento" aria-expanded="false" aria-controls="collapse-b1">Inserimento <i class="bi bi-plus-circle"></i></button>


  <br><br><br>



  <div id="myGroup">


    <div class="collapse" id="ricerca" data-bs-parent="#myGroup">
      <div class="gruppo-1">
        <div class="row">
          <div class="col-md-6 offset-md-3">
            <form method="get" action='DBsearch.php' class='card p-3 bg-light'>
              <label class="control-label " for="Postazioni">
            <b>Postazione:</b>
            </label>
              <select class="form-select" id="PostazioniS" name="Postazioni" type='search'>
                <option value="" disabled selected selected hidden>Seleziona...</option>
                <option value="Tutte">Tutte</option>


              </select>

              <div class="flex-container">

                <label class="control-label" for="Data">
            <p><b>Da:</b></p>
            </label>

                <input class="form-control" id="Data" name="Data" placeholder="AAAA/MM/GG" type="text" />

                <label class="control-label" for="DataA">
            <p><b>A:</b></p>
            </label>

                <input class="form-control" id="DataA" name="DataA" placeholder="AAAA/MM/GG" type="text" />


                <button class="btn btn-primary " name="submit" type="submit">
                <b>Cerca</b>
            </button>
              </div>

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



    <div class="collapse" id="inserimento" data-bs-parent="#myGroup">
      <div class="gruppo-2">
        <form method="get" action='DBinsert.php'>
          <div class="card p-3 bg-light">
            <div class="card-body">
              <div class='row g-3'>
                <div class="col-md-12">
                  <label class="control-label " for="Postazioni">
                <b>Postazione:</b>
                </label>
                  <select class="form-select" id="Postazioni" name="Postazioni" type='number' required>
                    <option value="" disabled selected selected hidden>Seleziona...</option>
                  </select>
                </div>

                <div class="col-6">
                  <label class="control-label " for="Data2">
                <b>Data:</b>
                </label>
                  <input class="form-control" id="Data2" name="Data2" placeholder="AAAA/MM/GG" type="text" required/>
                </div>

                <div class="col-6">
                  <label class="control-label" for="Ora">
                <b>Ora:</b>
                </label>
                  <input class="form-control" type="time" id="Ora" name="Ora" required/>
                </div>

                <div class="col-md-12">
                  <label class="control-label " for="Verbale">
                <b>Tipo di verbale:</b>
                </label>
                  <select class="form-select" id="Verbale" name="Verbale" type='text' required>
                    <option value="" disabled selected selected hidden>Seleziona...</option>
                  </select>
                </div>


                <div class="col-6">
                  <label class="control-label " for="NSet">
                <b>Set:</b>
                </label>
                  <select class="form-select" id="NSet" name="NSet" type='number' required>
                    <option value="" disabled selected selected hidden>Seleziona...</option>
                  </select>
                </div>

                <div class="col-6">
                  <label class="control-label " for="Flash">
                <b>Flash:</b>
                </label>
                  <select class="form-select" id="Flash" name="Flash" type='number' required>
                    <option value="" disabled selected selected hidden>Seleziona...</option>
                  </select>
                </div>

                <div class="col-md-12">
                  <label for="text" class="col-4 col-form-label"><b>Protocollo:</b></label>
                  <input id="Protocollo" name="Protocollo" type="text" class="form-control" required>
                </div>

                <div class="col-6">
                  <label for="text" class="col-4 col-form-label"><b>Scatti da:</b></label>
                  <input id="ScattiDa" name="ScattiDa" type="text" class="form-control" required>
                </div>

                <div class="col-6">
                  <label for="text" class="col-4 col-form-label"><b>a:</b></label>
                  <input id="ScattiA" name="ScattiA" type="text" class="form-control" required>
                </div>
              </div>
            </div>
          </div>
          <br>
          <div class="card p-3 bg-warning mb-3" id='notShown' style='display: none;'>
            <h5>SCARICO DATI</h5>
            <div class="card-body">
              <div class='row g-3'>

                <div class="col-6">
                  <label class="control-label " for="DataCartelleDa">
                <b>Data cartelle da:</b>
                </label>
                  <input class="form-control" id="DataCartelleDa" name="DataCartelleDa" placeholder="AAAA/MM/GG" type="text" required/>
                </div>

                <div class="col-6">
                  <label class="control-label " for="DataCartelleA">
                <b>Data cartelle a:</b>
                </label>
                  <input class="form-control" id="DataCartelleA" name="DataCartelleA" placeholder="AAAA/MM/GG" type="text" required/>
                </div>

                <div class="col-12">
                  <label for="text" class="col-4 col-form-label"><b>Numero Cartelle:</b></label>
                  <input id="NumeroCartelle" name="NumeroCartelle" type="text" class="form-control" required>
                </div>

                <div class="col-6">
                  <label class="control-label " for="DataScarico">
                <b>Data Scarico:</b>
                </label>
                  <input class="form-control" id="DataScarico" name="DataScarico" placeholder="AAAA/MM/GG" type="text" required/>
                </div>

                <div class="col-6">
                  <label class="control-label" for="OraScarico">
                <b>Ora Scarico:</b>
                </label>
                  <input class="form-control" type="time" id="OraScarico" name="OraScarico" required/>
                </div>
              </div>
            </div>
          </div>
          <br>
          <div class="card p-3 bg-light">
            <h5>VERBALIZZANTI E NOTE</h5>
            <div class="card-body">
              <div class='row g-3'>
                <div class="col-6">
                  <label class="control-label " for="Agente 1">
                <b>Agente 1:</b>
                </label>
                  <select class="form-select" id="Agente1" name="Agente1" type='number' required>
                    <option value="" disabled selected selected hidden>Seleziona...</option>
                  </select>
                </div>

                <div class="col-6">
                  <label class="control-label " for="Agente 2">
                <b>Agente 2:</b>
                </label>
                  <select class="form-select" id="Agente2" name="Agente2" type='number' required>
                  </select>
                </div>

                <div class="col-md-12">
                  <label for="text" class="col-4 col-form-label"><b>Note:</b></label>
                  <input id="Note" name="Note" type="text" class="form-control">
                </div>

                <div class="col-12">
                  <button class="btn btn-warning" name="submit" type="submit">
                Inserisci
                </button>
                </div>
              </div>
            </div>

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


</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.