Bootstrap 4.5表格text-nowrap失效及两列间距消除问题求助

Hey there! Let's work through those two issues with your Bootstrap 4.5 registration form step by step:

1. Getting text-nowrap to Behave as Expected #

The text-nowrap class on your table might not be working because Bootstrap's default table layout doesn't always propagate the nowrap behavior to individual cells, especially with table-borderless. Here's how to fix it:

• Option 1: Apply text-nowrap directly to label cells
  If you only want your labels to avoid wrapping, add the class to the <td> elements containing your labels:

  <td class="text-nowrap">
    <label for="firstnameid">First Name: </label>
  </td>
  

• Option 2: Force full-width table with nowrap
  Add w-100 (Bootstrap's full-width utility) to your table to ensure it takes up the container's width, which helps the text-nowrap constraint apply consistently:

  <table class="table table-borderless w-100 text-nowrap">
  

2. Removing Highlighted Spacing Between Columns #

That "highlighted spacing" you're seeing is likely either Bootstrap's default padding on table cells, or the focus outline around form inputs. Let's address both scenarios:

Fix 1: Remove Table Cell Padding #

Bootstrap's table class adds padding to <td> elements by default. To eliminate this gap, add custom CSS:

.table.no-column-gap td {
  padding: 0;
  /* Optional: Add a tiny margin if you want a small gap between label and input */
  margin-right: 10px;
}

Then update your table's class to include this custom class:

<table class="table table-borderless w-100 text-nowrap no-column-gap">

Fix 2: Adjust Input Focus Highlight #

If the "highlight" is the blue outline that appears when inputs are focused, you can modify or remove it with CSS:

.form-control:focus {
  box-shadow: none; /* Remove default Bootstrap focus shadow */
  outline: none; /* Remove browser default outline */
  /* Optional: Replace with a custom border to match your button style */
  border-color: #28a745;
}

Updated Full Code #

Here's your form with both fixes applied, so it should behave exactly as you want:

<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; }
/* Remove column gap */
.table.no-column-gap td {
  padding: 0;
  margin-right: 10px;
}
/* Custom input focus style */
.form-control:focus {
  box-shadow: none;
  border-color: #28a745;
}
</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 w-100 text-nowrap no-column-gap">
<tbody>
<tr>
<td class="text-nowrap">
<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 class="text-nowrap">
<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 class="text-nowrap">
<label for="emailid">Email: </label>
</td>
<td>
<input id="emailid" type="email" placeholder="Email" class="form-control" name="txtemail" required />
</td>
</tr>
<tr>
<td class="text-nowrap">
<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>

内容的提问来源于stack exchange，提问作者teneji