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

如本答案中所述，您可以為第一列定義一個小寬度，如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>

祝你好運！