css - 标签和输入之间的 Bootstrap 间距

Question

在使用 bootstrap 时，是什么在标签和输入之间提供了空间？

在上图中，您会看到邮寄地址 1 在输入后有一个漂亮的空格，但其余部分靠得很近。是什么造成了这个空间？我想要它在我所有的之间。只是好奇是什么原因造成的。

<div class="row">
    <div class="col-lg-12">
        <label for="firstname_<cfoutput>#Add#</cfoutput>">Name of <cfoutput>#numberMapping[Peoplecount]#</cfoutput> owner as it appears on driver license:</label>
            <div class="form-group">
                <div class="col-lg-4">
                    <cfoutput><input type="text" class="form-control input-sm" name="firstname_#Add#" id="firstname_#Add#" placeholder="First"  validateat="onSubmit" validate="noblanks" maxlength="100" required="yes" value="#session.checkout.info["firstname_" & Add]#" /></cfoutput>          
                </div>
                <div class="col-lg-4">              
                    <cfoutput><input type="text" class="form-control input-sm" name="middlename_#Add#" id="middlename_#Add#" placeholder="Middle" maxlength="100" value="#session.checkout.info["middlename_" & Add]#" /></cfoutput>            
                </div>
                <div class="col-lg-4">
                    <cfoutput><input type="text" class="form-control input-sm" name="lastname_#Add#" id="lastname_#Add#" placeholder="Last" validateat="onSubmit" validate="noblanks" maxlength="100" required="yes" value="#session.checkout.info["lastname_" & Add]#" /></cfoutput>           
                </div>
            </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
    <label for="birthmonth_<cfoutput>#Add#</cfoutput>">Date of birth:</label>
        <div class="form-group">            
            <div class="col-lg-4">
                <cfinclude template="../ddl/birthmonth.cfm">
            </div>
            <div class="col-lg-4">
                <cfinclude template="../ddl/birthday.cfm">
            </div>
            <div class="col-lg-4">
                <cfinclude template="../ddl/birthyear.cfm">
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-4">
        <label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
            <div class="form-group">
                <div class="col-lg-12">
                    <cfinclude template="../ddl/gender.cfm">
                </div>
            </div>
    </div>
    <div class="col-lg-7">
        <label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm">
            <div class="form-group">
                <div class="col-lg-2">
                    <cfoutput>
                    <cfinclude template="../ddl/dlstates.cfm">  <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) --->
                </div>
                <div class="col-lg-5">
                    <input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" />
                    </cfoutput>
                    <span id="result_<cfoutput>#Add#</cfoutput>"></span>
                </div>
            </div>
    </div>
</div>


<div class="row">
    <div class="col-lg-7">
        <div class="form-group">
            <label for="street_<cfoutput>#Add#</cfoutput>">Mailing address 1:</label>
            <cfoutput><input type="text" class="form-control input-sm" name="street_#Add#" validateat="onSubmit" validate="maxlength" id="autocomplete#Add#" size="54" maxlength="120" required="yes" onFocus="geolocate()" value="#session.checkout.info["street_" & Add]#" /></cfoutput>
        </div>
    </div>
</div>

<div class="row">
    <div class="form-group">
        <div class="col-lg-7">
            <label for="m2street_<cfoutput>#Add#</cfoutput>">Mailing address 2:</label>
            <cfoutput><input type="text" class="form-control input-sm" name="m2street_#Add#" placeholder="Apartment, suite, unit etc. (optional)" validateat="onSubmit" validate="maxlength" id="route#Add#" size="54" maxlength="120" value="#session.checkout.info["m2street_" & Add]#" /></cfoutput>
        </div>
    </div>
</div>

<div class="row">
    <div class="form-group">
        <div class="col-lg-4">
            <label for="city_<cfoutput>#Add#</cfoutput>">City:</label>
            <cfoutput><input type="text" class="form-control input-sm" name="city_#Add#" validateat="onSubmit" validate="maxlength" id="locality#Add#" size="30" maxlength="50" required="yes" value="#session.checkout.info["city_" & Add]#" /></cfoutput>
        </div>   
        <div class="col-lg-4">    
            <label for="state_<cfoutput>#Add#</cfoutput>" class="labelspace">State:</label>
            <cfoutput><input type="text" class="form-control input-sm" name="state_#Add#" validateat="onSubmit" validate="maxlength" id="administrative_area_level_1#Add#" size="26" maxlength="50" required="yes" value="#session.checkout.info["state_" & Add]#" /></cfoutput>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-2">
        <div class="form-group">
            <label for="postal_<cfoutput>#Add#</cfoutput>">Zip code:</label>
            <cfoutput><input type="text" class="form-control input-sm" name="postal_#Add#" id="postal_code#Add#" size="8" maxlength="12" required="yes" value="#session.checkout.info["postal_" & Add]#" /></cfoutput>
        </div>
    </div>
</div>

Answer 1

对于“邮寄地址 1”，您的 form-group 位于 col-lg-7 内。