Bootstrap 4.5 text-nowrap未按表中的预期运行

Question

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

​

​

我尝试了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>

​

Answer 1

正如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>

​

祝好运!