css - 在 Bootstrap 3 表单中并排设置两个输入字段的正确方法?
问题描述
我有许多输入字段的表单。为了避免用户在中大屏幕上滚动,我想并排放置一些输入字段。并非所有字段都必须并排,这就是我不使用内联表单的原因。这是我所拥有的示例:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmDemo" id="frmDemo">
<div class="form-group required">
<label class="control-label" for="last"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frmDemo_last" id="frmDemo_last" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="first"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frmDemo_first" id="frmDemo_first" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="plan"><span class="label label-primary">Plan:</span></label>
<select class="form-control" name="frmDemo_plan" id="frmDemo_plan">
<option value="">--Choose Plan--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="plantext"><span class="label label-primary">Plan Text:</span></label>
<input type="text" class="form-control" name="frmDemo_plantext" id="frmDemo_plantext" placeholder="Enter Plan Text" maxlength="50">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="gender"><span class="label label-primary">Gender:</span></label>
<select class="form-control" name="frmDemo_gender" id="frmDemo_gender" required>
<option value="">--Choose Gender--</option>
<option value="F">Female</option>
<option value="M">Male</option>
</select>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="gender"><span class="label label-primary">Grade:</span></label>
<select class="form-control" name="frmDemo_grade" id="frmDemo_grade" required>
<option value="">--Choose Grade--</option>
<option value="PK">PK</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frmDemo_submit" id="frmDemo_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frmDemo_message" class="alert message-submit"></div>
</div>
</div>
</form>
如您所见,我能够做到这一点并将字段并排放置。我的问题是这样做的正确方法是什么?我的第一组Plan
输入字段使用form-group
div,然后是row
div,然后是col-
div。第二组输入字段为Grade
并Gender
使用row
div 和 then form-group col-
。两种方式都有效,但根据 Bootstrap 规则哪一种有效?如果有人可以解释或给我建议,我将不胜感激。谢谢你。
解决方案
没关系。但是,如果您想要一些其他方式而不使用 Bootstrap 行和列,您可以定位特定的 .form-group 以在您的 CSS 中设置样式。我个人这样做是因为它比有许多嵌套的行和列要干净得多。我只会将行和列用于其他目的。
HTML:
<div class="form-group required">
<label class="control-label" for="last"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frmDemo_last" id="frmDemo_last" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="first"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frmDemo_first" id="frmDemo_first" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group">
<label class="control-label" for="plan"><span class="label label-primary">Plan:</span></label>
<select class="form-control" name="frmDemo_plan" id="frmDemo_plan">
<option value="">--Choose Plan--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="plantext"><span class="label label-primary">Plan Text:</span></label>
<input type="text" class="form-control" name="frmDemo_plantext" id="frmDemo_plantext" placeholder="Enter Plan Text" maxlength="50">
</div>
<div class="form-group">
<label class="control-label" for="gender"><span class="label label-primary">Gender:</span></label>
<select class="form-control" name="frmDemo_gender" id="frmDemo_gender" required>
<option value="">--Choose Gender--</option>
<option value="F">Female</option>
<option value="M">Male</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="gender"><span class="label label-primary">Grade:</span></label>
<select class="form-control" name="frmDemo_grade" id="frmDemo_grade" required>
<option value="">--Choose Grade--</option>
<option value="PK">PK</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>
</div>
<div class="form-group">
<button type="submit" name="frmDemo_submit" id="frmDemo_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group">
<div id="frmDemo_message" class="alert message-submit"></div>
</div>
CSS:
/* I used nth-child(n+number) pseudoclass selector since you wanted to start from the 3rd div with .form-group class to be side by side with each other. */
.form-group:nth-child(n+3) {
width:50%;
float:left;
}
.form-group:nth-child(n+3) input, .form-group:nth-child(n+3) select {
width:95%;
}
推荐阅读
- postgresql - Idea 在使用 Postgresql 语言注入的字符串中找不到我的表
- r - R data.table:根据名称存储在其他地方的变量选择行
- c++ - Windows 服务不捕获关闭事件 C/C++
- list - 试图填写班级列表
- android - 在 Android Studio 中请求位置权限时应用崩溃
- javascript - JavaScript 调用了我没有调用的东西?
- java - 无法向用户添加角色。JDA
- r - 在 Shiny 的 sendSweetAlert 中插入附加信息
- r - R将公式和条件逻辑应用于数据框
- python - 模拟三个医生在诊所排队,关闭时间