Question

列之间的分辨率差异使彼此之间留有空白区域如何解决？！

the issue in explained in this picture

这是该问题的代码段！预先感谢希望在这里获得帮助。如果您需要任何其他信息，请问我。

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</head>

<body>
  <div id="subject-container" class="row">
    <div class="col col-sm-12 col-md-6">
      <div class="card text-center" style="margin-top:1%;">
        <div class="card-header"> Subject Details </div>
        <div class="card-body">
          <h5 class="card-title">Math</h5>
          <div class="table-responsive">
            <table class="table table-sm table-dark table-hover">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Email</th>
                  <th scope="col">Degree</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>ibrahimayad@gmail.com</td>
                  <td>absent</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="row text-center">
            <div class="col" style="margin-bottom:1%"> <button type="button" name="copylink" id="copylink" class="copy btn btn-dark btn-md btn-block" value="127.0.0.1/questions.php?qid=AlqOF6Fp1wE.k155knb57.H6Ro" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Copied">Copy Link</button>              </div>
            <div class="col">
              <form action="deleteSub.php" method="POST"> <button type="submit" name="delete" id="AlqOF6Fp1wE.k155knb57.H6Ro" class="deleteSub btn btn-dark btn-md btn-block" value="AlqOF6Fp1wE.k155knb57.H6Ro">Delete Subject</button> </form>
            </div>
          </div>
          <div class="row text-center " style="margin-top:1%;">
            <div class="col m-1"> <button type="button" data-toggle="modal" data-target="#addEamilModal" name="addEmail" class="addEmail btn btn-dark btn-md btn-block" data-whatever="AlqOF6Fp1wE.k155knb57.H6Ro">Add student email</button> </div>
            <div class="col m-1"> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col col-sm-12 col-md-6">
      <div class="card text-center" style="margin-top:1%;">
        <div class="card-header"> Subject Details </div>
        <div class="card-body">
          <h5 class="card-title">ComputerScienceExam</h5>
          <div class="table-responsive">
            <table class="table table-sm table-dark table-hover">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Email</th>
                  <th scope="col">Degree</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>aw@gmail.com</td>
                  <td>24</td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <th scope="row">2</th>
                  <td>wow@gmail.com</td>
                  <td>absent</td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <th scope="row">3</th>
                  <td>Mico@gmail.com</td>
                  <td>50</td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <th scope="row">4</th>
                  <td>mico@gmail.com</td>
                  <td>absent</td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <th scope="row">5</th>
                  <td>some@gmail.com</td>
                  <td>absent</td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <th scope="row">6</th>
                  <td>what@gmail.com</td>
                  <td>absent</td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <th scope="row">7</th>
                  <td>some1@gmail.com</td>
                  <td>absent</td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <th scope="row">8</th>
                  <td>som22e@gmail.com</td>
                  <td>absent</td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <th scope="row">9</th>
                  <td>ibrahimayad@gmail.com</td>
                  <td>0</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="row text-center">
            <div class="col" style="margin-bottom:1%"> <button type="button" name="copylink" id="copylink" class="copy btn btn-dark btn-md btn-block" value="127.0.0.1/questions.php?qid=AlqOF6Fp1wE.k15smRqFGCY3w." data-container="body" data-toggle="popover" data-placement="bottom" data-content="Copied">Copy Link</button>              </div>
            <div class="col">
              <form action="deleteSub.php" method="POST"> <button type="submit" name="delete" id="AlqOF6Fp1wE.k15smRqFGCY3w." class="deleteSub btn btn-dark btn-md btn-block" value="AlqOF6Fp1wE.k15smRqFGCY3w.">Delete Subject</button> </form>
            </div>
          </div>
          <div class="row text-center " style="margin-top:1%;">
            <div class="col m-1"> <button type="button" data-toggle="modal" data-target="#addEamilModal" name="addEmail" class="addEmail btn btn-dark btn-md btn-block" data-whatever="AlqOF6Fp1wE.k15smRqFGCY3w.">Add student email</button> </div>
            <div class="col m-1"> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col col-sm-12 col-md-6">
      <div class="card text-center" style="margin-top:1%;">
        <div class="card-header"> Subject Details </div>
        <div class="card-body">
          <h5 class="card-title">ComputerScienceExam2</h5>
          <div class="table-responsive">
            <table class="table table-sm table-dark table-hover">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Email</th>
                  <th scope="col">Degree</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>ibrahimayad@gmail.com</td>
                  <td>absent</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="row text-center">
            <div class="col" style="margin-bottom:1%"> <button type="button" name="copylink" id="copylink" class="copy btn btn-dark btn-md btn-block" value="127.0.0.1/questions.php?qid=AlqOF6Fp1wE.k15szA6jR0aRjo" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Copied">Copy Link</button>              </div>
            <div class="col">
              <form action="deleteSub.php" method="POST"> <button type="submit" name="delete" id="AlqOF6Fp1wE.k15szA6jR0aRjo" class="deleteSub btn btn-dark btn-md btn-block" value="AlqOF6Fp1wE.k15szA6jR0aRjo">Delete Subject</button> </form>
            </div>
          </div>
          <div class="row text-center " style="margin-top:1%;">
            <div class="col m-1"> <button type="button" data-toggle="modal" data-target="#addEamilModal" name="addEmail" class="addEmail btn btn-dark btn-md btn-block" data-whatever="AlqOF6Fp1wE.k15szA6jR0aRjo">Add student email</button> </div>
            <div class="col m-1"> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

bootstrap：列下降以响应使用时生成空白区域

0 个答案: