Bootstrap 4.5 text-nowrap 在表中未按预期工作答案

【问题标题】：Bootstrap 4.5 text-nowrap not working as expected in tableBootstrap 4.5 text-nowrap 在表中未按预期工作
【发布时间】：2020-12-18 17:18:51
【问题描述】：

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

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

【问题讨论】：

为什么要使用表来运行它？使用网格系统。 .rows 和 .cols
@Alphabetus 如果我选择网格系统，将会有两个.cols。它将平分秋色，所以问题仍然相同。

标签： css twitter-bootstrap bootstrap-4 html-table nowrap

【解决方案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>

祝你好运！

【讨论】：