我有一张表格，我使用col-md-6将表格分成两列，所以一半字段在左边，另一半在右边。现在我要做的就是让左边的所有字段都向右移动，这样就没有多余的空间，而且表格看起来更加居中。
这是我的代码：
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-sm-2" for="first_name">Firstname:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="first_name"
placeholder="First Name" name="first_name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="last_name">Lastname:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="last_name"
placeholder="Last Name" name="last_name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email"
placeholder="Email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="address1">Address
Line 1:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address1"
placeholder="Address Line 1" name="address1">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="address2">Address
Line 2:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address2"
placeholder="Address Line 2" name="address2">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-sm-2" for="city">City:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="city" placeholder="City"
name="city">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="country">Country:</label>
<div class="col-sm-10">
<select class="form-control" id="country" name="country">
<option value="CA">Canada</option>
<option value="US">United States</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="state">State:</label>
<div class="col-sm-10">
<select class="form-control" id="state" name="state">
<option value="ON">Ontario</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NT">Northwest Territories</option>
<option value="NS">Nova Scotia</option>
<option value="NU">Nunavut</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="zip">Postal Code:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="zip"
placeholder="Postal Code" name="zip">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="night_phone_a">Phone:</label>
<div class="col-sm-10">
<div class="form-group phone-number">
<div class="col-xs-3">
<input type="tel" name="night_phone_a" class="form-control"
value="" size="3" maxlength="3">
</div>
<div class="col-xs-3">
<input type="tel" name="night_phone_b" class="form-control"
value="" size="3" maxlength="3">
</div>
<div class="col-xs-4">
<input type="tel" name="night_phone_c" class="form-control"
value="" size="4" maxlength="4">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default submit">Submit</button>
</div>
</div>
</div>
我尝试过在第一个col-md-6上使用pull-right，我也尝试过文本权限，但它们都不起作用。如何让第一个col-md-6中的字段向右对齐？
答案 0 :(得分：2)
我遇到了同样的问题。我查看了 bootstrap CSS，我看到它们解决了“text-center”，但没有解决“text-right”，但它们确实解决了“text-end”，这对我来说.
答案 1 :(得分：0)
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<label class="text-right control-label col-sm-2" for="first_name">Firstname:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="first_name"
placeholder="First Name" name="first_name">
</div>
</div>
<div class="form-group">
<label class="text-right control-label col-sm-2" for="last_name">Lastname:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="last_name"
placeholder="Last Name" name="last_name">
</div>
</div>
<div class="form-group">
<label class=" text-right control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email"
placeholder="Email" name="email">
</div>
</div>
<div class="form-group">
<label class="text-right control-label col-sm-2" for="address1">Address
Line 1:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address1"
placeholder="Address Line 1" name="address1">
</div>
</div>
<div class="form-group">
<label class="text-right control-label col-sm-2" for="address2">Address
Line 2:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address2"
placeholder="Address Line 2" name="address2">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-sm-2" for="city">City:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="city" placeholder="City"
name="city">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="country">Country:</label>
<div class="col-sm-10">
<select class="form-control" id="country" name="country">
<option value="CA">Canada</option>
<option value="US">United States</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="state">State:</label>
<div class="col-sm-10">
<select class="form-control" id="state" name="state">
<option value="ON">Ontario</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NT">Northwest Territories</option>
<option value="NS">Nova Scotia</option>
<option value="NU">Nunavut</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="zip">Postal Code:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="zip"
placeholder="Postal Code" name="zip">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="night_phone_a">Phone:</label>
<div class="col-sm-10">
<div class="form-group phone-number">
<div class="col-xs-3">
<input type="tel" name="night_phone_a" class="form-control"
value="" size="3" maxlength="3">
</div>
<div class="col-xs-3">
<input type="tel" name="night_phone_b" class="form-control"
value="" size="3" maxlength="3">
</div>
<div class="col-xs-4">
<input type="tel" name="night_phone_c" class="form-control"
value="" size="4" maxlength="4">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default submit">Submit</button>
</div>
</div>
</div>