如何使用Bootstrap移除文本间空格？表单布局间距调整求助

Hey there! I see you're new to Bootstrap and trying to get rid of that annoying space between "Send inquiry to:" and your company name label. Let's break down the issue and fix it step by step.

Why the Space Exists #

Right now, you're using Bootstrap's grid system (col-sm-2 for the static label and col-sm-10 for the dynamic company name). Bootstrap grid columns have default left/right padding built into their styles, which creates that gap. Plus, putting them in separate columns forces them to occupy distinct sections of the row, adding extra unwanted space.

Solution 1: Keep Them Inline (Recommended) #

The cleanest, most Bootstrap-friendly fix is to move both the static label and your dynamic company name into the same container, so they render right next to each other. You don't need separate grid columns for this if you want tight alignment.

Update your code like this:

<div class="formmain">
  <fieldset class="scheduler-border">
    <legend class="scheduler-border">INQUIRY DETAILS</legend>
    <div class="row">
      <div class="form-group">
        <!-- Combine label and company name in the same line -->
        <label class="control-label" for="usr">Send inquiry to:</label>
        <asp:Label ID="lbCompanyname" runat="server" Text=""></asp:Label>
        <asp:Label ID="lbcountry" runat="server" Text=""></asp:Label>
      </div>
    </div>
  </fieldset>
</div>

If you need this to be responsive (wrap on smaller screens), add the .form-inline class to the .form-group:

<div class="form-group form-inline">
  <label class="control-label" for="usr">Send inquiry to:</label>
  <asp:Label ID="lbCompanyname" runat="server" Text=""></asp:Label>
  <asp:Label ID="lbcountry" runat="server" Text=""></asp:Label>
</div>

Solution 2: Override Grid Padding (If You Need to Keep Columns) #

If you absolutely want to retain the grid column structure, you can override the default padding on those specific columns with custom CSS.

First, add custom classes to your columns:

<div class="form-group">
  <label class="control-label col-sm-2 no-padding-right" for="usr">Send inquiry to:</label>
  <div class="col-sm-10 no-padding-left">
    <asp:Label ID="lbCompanyname" runat="server" Text=""></asp:Label>
  </div>
</div>
<div class="row">
  <div class="form-group">
    <div class="col-sm-2 col-sm-offset-2">
      <asp:Label ID="lbcountry" runat="server" Text=""></asp:Label>
    </div>
  </div>
</div>

Then add this CSS to your stylesheet:

.no-padding-right {
  padding-right: 0 !important;
}
.no-padding-left {
  padding-left: 0 !important;
}

Note: This method is less ideal because it overrides Bootstrap's default styling, which could cause unintended layout issues elsewhere. Stick with Solution 1 if possible!

Final Result #

Either approach will give you the tight alignment you're aiming for:

Send Inquiry to:companyname countryname

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