Css 在Bootstrap 3表单中并排设置两个输入字段的正确方法?
我有很多输入字段的表单。为了避免用户在中屏幕和大屏幕上滚动,我想将一些输入字段并排放置。并非所有字段都必须并排,这就是我不使用内联表单的原因。以下是我的例子:Css 在Bootstrap 3表单中并排设置两个输入字段的正确方法?,css,html,twitter-bootstrap,twitter-bootstrap-3,Css,Html,Twitter Bootstrap,Twitter Bootstrap 3,我有很多输入字段的表单。为了避免用户在中屏幕和大屏幕上滚动,我想将一些输入字段并排放置。并非所有字段都必须并排,这就是我不使用内联表单的原因。以下是我的例子: 姓氏: 名字: 计划: --选择计划-- 1. 2. 3. 计划文本: 性别: --选择性别-- 女性 男性 等级: --选择等级-- 主键 00 01 02 03 04 05 提交 没关系。但是,如果您想要一些其他方式而不使用引导行和列,您可以在CSS中针对特定的.form组进行样式设置。我个人这样做是因为它比有许多嵌套的行和列要干
姓氏:
名字:
计划:
--选择计划--
1.
2.
3.
计划文本:
性别:
--选择性别--
女性
男性
等级:
--选择等级--
主键
00
01
02
03
04
05
提交
没关系。但是,如果您想要一些其他方式而不使用引导行和列,您可以在CSS中针对特定的.form组进行样式设置。我个人这样做是因为它比有许多嵌套的行和列要干净得多。我只会将行和列用于其他目的
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>
/* 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%;
}