在下面的示例中，我并排定义了两种形式。我有一个选择下拉选项，使其比其他输入更大，它溢出表单的边界。有没有我可以指定select应该与所有其他输入的宽度相同？我正在使用Bootstrap 3.3.7
<div class="container">
<table class="table table-striped">
<tbody>
<tr>
<td colspan="1">
<form class="well form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label">Full Name</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input id="fullName" name="fullName" placeholder="Full Name" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Address Line 1</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine1" name="addressLine1" placeholder="Address Line 1" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Address Line 2</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine2" name="addressLine2" placeholder="Address Line 2" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">City</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="city" name="city" placeholder="City" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">State/Province/Region</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="state" name="state" placeholder="State/Province/Region" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Postal Code/ZIP</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="postcode" name="postcode" placeholder="Postal Code/ZIP" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Country</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon" style="max-width: 100%;"><i class="glyphicon glyphicon-list"></i></span>
<select class="selectpicker">
<option>A really long option to push the menu over the edget</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Email</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span><input id="email" name="email" placeholder="Email" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Phone Number</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span><input id="phoneNumber" name="phoneNumber" placeholder="Phone Number" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
</fieldset>
</form>
</td>
<td colspan="1">
<form class="well form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label">Full Name</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input id="fullName" name="fullName" placeholder="Full Name" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Address Line 1</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine1" name="addressLine1" placeholder="Address Line 1" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Address Line 2</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine2" name="addressLine2" placeholder="Address Line 2" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">City</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="city" name="city" placeholder="City" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">State/Province/Region</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="state" name="state" placeholder="State/Province/Region" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Postal Code/ZIP</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="postcode" name="postcode" placeholder="Postal Code/ZIP" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Country</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon" style="max-width: 100%;"><i class="glyphicon glyphicon-list"></i></span>
<select class="selectpicker">
<option>A really long option to push the menu over the edget</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Email</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span><input id="email" name="email" placeholder="Email" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Phone Number</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span><input id="phoneNumber" name="phoneNumber" placeholder="Phone Number" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
</fieldset>
</form>
</td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分：0)
在自定义css文件中添加此行的css，您可以更改select标记的样式或只放一个 class =＆＃34; selectpicker form-control＆＃34;在您的选择标记中
select {
position:relative;
width:100%;
height:34px;
color:#666;
background:transparent;
font-size: 12px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}<div class="container">
<table class="table table-striped">
<tbody>
<tr>
<td colspan="1">
<form class="well form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label">Full Name</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input id="fullName" name="fullName" placeholder="Full Name" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Address Line 1</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine1" name="addressLine1" placeholder="Address Line 1" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Address Line 2</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine2" name="addressLine2" placeholder="Address Line 2" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">City</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="city" name="city" placeholder="City" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">State/Province/Region</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="state" name="state" placeholder="State/Province/Region" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Postal Code/ZIP</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="postcode" name="postcode" placeholder="Postal Code/ZIP" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Country</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon" style="max-width: 100%;"><i class="glyphicon glyphicon-list"></i></span>
<select class="selectpicker">
<option>A really long option to push the menu over the edget</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Email</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span><input id="email" name="email" placeholder="Email" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Phone Number</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span><input id="phoneNumber" name="phoneNumber" placeholder="Phone Number" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
</fieldset>
</form>
</td>
<td colspan="1">
<form class="well form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label">Full Name</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input id="fullName" name="fullName" placeholder="Full Name" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Address Line 1</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine1" name="addressLine1" placeholder="Address Line 1" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Address Line 2</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine2" name="addressLine2" placeholder="Address Line 2" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">City</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="city" name="city" placeholder="City" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">State/Province/Region</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="state" name="state" placeholder="State/Province/Region" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Postal Code/ZIP</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="postcode" name="postcode" placeholder="Postal Code/ZIP" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Country</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon" style="max-width: 100%;"><i class="glyphicon glyphicon-list"></i></span>
<select class="selectpicker">
<option>A really long option to push the menu over the edget</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Email</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span><input id="email" name="email" placeholder="Email" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Phone Number</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span><input id="phoneNumber" name="phoneNumber" placeholder="Phone Number" class="form-control" required="true" value="" type="text"></div>
</div>
</div>
</fieldset>
</form>
</td>
</tr>
</tbody>
</table>
</div>
在自定义css文件中添加它将起作用