Question

对于Bootstrap而言，我有点新手，而且我正努力让某些表单字段符合我想要的布局。我的HTML代码示例片段在这里：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Registration</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    </head>
    <body>
        <form id="frmRegister" class="form-horizontal">
            <div id="divContainer" class="container-fluid" style="width: 90%">
                <h2 id="h2Registration" style="background-color: #F76803; color: white; margin: 3px 3px 3px 3px"></h2>

                <div id="divChild1">
                    <div class="form-group">
                        <label for="txtChildLastName1" class="control-label col-xs-1">Last Name *</label>
                        <div class="col-xs-3">
                            <input type="text" class="form-control" id="txtChildLastName1" maxlength="25" />
                        </div>
                        <label for="txtChildFirstName1" class="control-label col-xs-1">First Name *</label>
                        <div class="col-xs-3">
                            <input type="text" class="form-control" id="txtChildFirstName1" maxlength="25" />
                        </div>
                        <label for="txtChildMiddleInit1" class="control-label col-xs-1">Initial</label>
                        <div class="col-xs-1">
                            <input type="text" class="form-control" id="txtChildMiddleInit1" maxlength="1" />
                        </div>
                        <label for="txtChildSuffix1" class="control-label col-xs-1">Suffix</label>
                        <div class="col-xs-1">
                            <input type="text" class="form-control" id="txtChildSuffix1" maxlength="5" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="groupGender" class="control-label col-xs-1">Gender *</label>
                        <div class="col-xs-2">
                            <label class="radio-inline">
                                <input type="radio" name="groupGender1" id="rbGenderMale1" value="M" />Male
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="groupGender1" id="rbGenderFemale1" value="F" />Female
                            </label>
                        </div>
                        <label for="txtChildDOB1" class="control-label col-xs-1">DOB *</label>
                        <div class="col-xs-1">
                            <input type="date" class="form-control dateTextBox" style="position: absolute; z-index: 999" id="txtChildDOB1" name="txtChildDOB1" value="" />
                        </div>
                        <label for="txtDoctorName1" class="control-label col-xs-1">Doctor Name</label>
                        <div class="col-xs-3">
                            <input type="text" class="form-control" id="txtDoctorName1" maxlength="50" />
                        </div>
                        <label for="txtDoctorPhone1" class="control-label col-xs-1">Doctor Phone</label>
                        <div class="col-xs-2">
                            <input type="text" class="form-control" id="txtDoctorPhone1" maxlength="50" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtAthleteDues1" class="control-label col-xs-1">Registration Fee</label>
                        <div class="col-xs-1 input-group">
                            <div class="input-group-addon">$</div>
                            <input type="text" class="form-control" id="txtAthleteDues1" placeholder="85" maxlength="2" />
                        </div>
                        <label for="txtUniform1" class="control-label col-xs-1">Uniform</label>
                        <div class="col-xs-2">
                            <input type="text" class="form-control" id="txtUniform1" maxlength="50" placeholder="Estimate size, if needed" />
                        </div>
                        <label for="txtUniformFee1" class="control-label col-xs-1">Uniform Fee</label>
                        <div class="col-xs-1 input-group">
                            <div class="input-group-addon">$</div>
                            <input type="text" class="form-control" id="txtUniformFee1" placeholder="80" maxlength="2" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtAthleteFees1" class="control-label col-xs-1">Athlete Fees</label>
                        <div class="col-xs-11">
                            <input type="text" class="form-control" id="txtAthleteFees1" disabled="disabled" value="Some descriptive text goes here" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>
</html>

罪魁祸首似乎是我使用input-group / input-group-addon类，它们在字段前加上美元符号（注册费）。结果是，Uniform和Uniform Fee的后续字段将换行到下一行，而不是在注册费用的同一行中显示为内联。不使用input-group / input-group-addon的前两行没有这个问题。

Answer 1

不要同时使用col-*和input group，而是将input-group 放在<{em}里面col-*。

<div class="col-xs-1"> <div class="input-group"> <div class="input-group-addon"> .. </div>

http://www.bootply.com/g6rtaYL4fy

Bootstrap 3的表单字段布局问题

1 个答案: