html - CSS bootstrap text-right 不起作用

Question

我有一个表单，我使用 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，我也尝试过 text-right，但它们都不起作用。如何让第一个 col-md-6 中的字段右对齐？

Answer 1

我遇到了同样的问题。我查看了 bootstrap CSS，发现它们解决了“text-center”，但没有解决“text-right”，但确实解决了“text-end”，这对我来说是这样的.