Bootstrap 4.5 text-nowrap无法按表中的预期工作

如何解决Bootstrap 4.5 text-nowrap无法按表中的预期工作

如何删除两列之间的空间？我需要删除以下突出显示的空间。

我尝试了text-nowrap，但是没有按预期工作。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
<style>
  .hiddenFramehideclass {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 1px;
    height: 1px;
  }
</style>



<div class="container shadow p-3 sm-5 bg-white rounded">
  <form method="post" class="needs-validation" action="" enctype="multipart/form-data" id="registerform" target="hiddenFrame">
    <h2>Register</h2>
    <hr />
    <table class="table table-borderless text-nowrap">
      <tbody>
        <tr>
          <td>
            <label for="firstnameid">First Name: </label>
          </td>
          <td>
            <input id="firstnameid" type="text" placeholder="First Name" class="form-control" name="txtfirstname" required />
          </td>
        </tr>

        <tr>
          <td>
            <label for="lastnameid">Last Name: </label>
          </td>
          <td>
            <input id="lastnameid" type="text" placeholder="Last Name" class="form-control" name="txtlastname" required />
          </td>
        </tr>

        <tr>
          <td>
            <label for="emailid">Email: </label>
          </td>
          <td>
            <input id="emailid" type="email" placeholder="Email" class="form-control" name="txtemail" required />
          </td>
        </tr>

        <tr>
          <td>
            <label for="passwordid">Password: </label>
          </td>
          <td>
            <input id="passwordid" type="password" placeholder="Password" class="form-control" name="txtupass" required />
          </td>
        </tr>
      </tbody>
    </table>
    <hr />
    <button type="submit" id="registersubmitbutton" class="btn btn-success" name="btn-register"><i class="fas fa-user-plus"></i> Register</button>
    <br /><br /><br />
    <span id="login_link"> <a href= "login">Login Here</a> </span>

    <hr />


  </form>

  <iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>
</div>

解决方法

如in this answer所述，您可以为第一列定义一个较小的宽度，例如1px，因为表格单元格已扩展到最小尺寸以适合其内容，这将自动删除此空白。

这是您调整后的代码示例：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
<style>
  .hiddenFramehideclass {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 1px;
    height: 1px;
  }
  table tr td:first-child {
    width: 1px;
  }
</style>



<div class="container shadow p-3 sm-5 bg-white rounded">
  <form method="post" class="needs-validation" action="" enctype="multipart/form-data" id="registerform" target="hiddenFrame">
    <h2>Register</h2>
    <hr />
    <table class="table table-borderless text-nowrap">
      <tbody>
        <tr>
          <td>
            <label for="firstnameid">First Name: </label>
          </td>
          <td>
            <input id="firstnameid" type="text" placeholder="First Name" class="form-control" name="txtfirstname" required />
          </td>
        </tr>

        <tr>
          <td>
            <label for="lastnameid">Last Name: </label>
          </td>
          <td>
            <input id="lastnameid" type="text" placeholder="Last Name" class="form-control" name="txtlastname" required />
          </td>
        </tr>

        <tr>
          <td>
            <label for="emailid">Email: </label>
          </td>
          <td>
            <input id="emailid" type="email" placeholder="Email" class="form-control" name="txtemail" required />
          </td>
        </tr>

        <tr>
          <td>
            <label for="passwordid">Password: </label>
          </td>
          <td>
            <input id="passwordid" type="password" placeholder="Password" class="form-control" name="txtupass" required />
          </td>
        </tr>
      </tbody>
    </table>
    <hr />
    <button type="submit" id="registersubmitbutton" class="btn btn-success" name="btn-register"><i class="fas fa-user-plus"></i> Register</button>
    <br /><br /><br />
    <span id="login_link"> <a href= "login">Login Here</a> </span>

    <hr />


  </form>

  <iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>
</div>

祝你好运！