Question

我试图弄清楚如何将这两个标签和输入排成一行。有人请告诉我哪里可能出错了？我只是想让他们排成一列。

<div class="row">
    <div class="col-lg-12">
        <label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
            <div class="form-group">
                <div class="col-xs-4">
                    <cfinclude template="../ddl/gender.cfm">
                </div>
            </div>
    </div>
    <div class="col-lg-12">
        <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-1">
                    <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-3">
                    <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>

如何将驾驶执照号码与性别放在同一行？

修改

将它改为col-lg-6会将它们放在同一条线上，但它们看起来仍然像这样？我试图让它们看起来不那么糟糕。

编辑2

<div class="row">
    <div class="col-lg-5">
        <label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
            <div class="form-group">
                <div class="col-lg-10">
                    <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>

如何更左侧删除驾驶执照号码以使其更好看？

Answer 1

您应该使用col-lg-6类而不是col-lg-12来使这两个元素占用6-6列。所以它们可以放在同一行。

更新：

<div class="row">
<div class="col-lg-4">
    <label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
        <div class="form-group">
            <div class="col-xs-4">
                <cfinclude template="../ddl/gender.cfm">
            </div>
        </div>
</div>
<div class="col-lg-8">
    <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-4">
                <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-4">
                <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>

Answer 2

它们都是12列宽。尝试使它们6，因此大小的一半。

Bootstrap网格系统将两个标签排列在一起

2 个答案: