0
私はフォームを持っていて、col-md-6を使用してフォームを2つのカラムに分割しているので、フィールドの半分が左側に、残りの半分が右側に移動します。今私がしようとしていることは、左のすべてのフィールドを右に降りて余分なスペースがなくなり、フォームがより中央に見えるようにすることです。ここでCSSのブートストラップのテキストが正しく動作しない
私のコードです：
<link rel="stylesheet"
\t href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
\t src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
\t src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-6">
\t <div class="form-group">
\t \t <label class="control-label col-sm-2" for="first_name">Firstname:</label>
\t \t <div class="col-sm-10">
\t \t \t <input type="text" class="form-control" id="first_name"
\t \t \t \t placeholder="First Name" name="first_name">
\t \t </div>
\t </div>
\t <div class="form-group">
\t \t <label class="control-label col-sm-2" for="last_name">Lastname:</label>
\t \t <div class="col-sm-10">
\t \t \t <input type="text" class="form-control" id="last_name"
\t \t \t \t placeholder="Last Name" name="last_name">
\t \t </div>
\t </div>
\t <div class="form-group">
\t \t <label class="control-label col-sm-2" for="email">Email:</label>
\t \t <div class="col-sm-10">
\t \t \t <input type="email" class="form-control" id="email"
\t \t \t \t placeholder="Email" name="email">
\t \t </div>
\t </div>
\t <div class="form-group">
\t \t <label class="control-label col-sm-2" for="address1">Address
\t \t \t Line 1:</label>
\t \t <div class="col-sm-10">
\t \t \t <input type="text" class="form-control" id="address1"
\t \t \t \t placeholder="Address Line 1" name="address1">
\t \t </div>
\t </div>
\t <div class="form-group">
\t \t <label class="control-label col-sm-2" for="address2">Address
\t \t \t Line 2:</label>
\t \t <div class="col-sm-10">
\t \t \t <input type="text" class="form-control" id="address2"
\t \t \t \t placeholder="Address Line 2" name="address2">
\t \t </div>
\t </div>
</div>
<div class="col-md-6">
\t <div class="form-group">
\t \t <label class="control-label col-sm-2" for="city">City:</label>
\t \t <div class="col-sm-10">
\t \t \t <input type="text" class="form-control" id="city" placeholder="City"
\t \t \t \t name="city">
\t \t </div>
\t </div>
\t <div class="form-group">
\t \t <label class="control-label col-sm-2" for="country">Country:</label>
\t \t <div class="col-sm-10">
\t \t \t <select class="form-control" id="country" name="country">
\t \t \t \t <option value="CA">Canada</option>
\t \t \t \t <option value="US">United States</option>
\t \t \t </select>
\t \t </div>
\t </div>
\t <div class="form-group">
\t \t <label class="control-label col-sm-2" for="state">State:</label>
\t \t <div class="col-sm-10">
\t \t \t <select class="form-control" id="state" name="state">
\t \t \t \t <option value="ON">Ontario</option>
\t \t \t \t <option value="AB">Alberta</option>
\t \t \t \t <option value="BC">British Columbia</option>
\t \t \t \t <option value="MB">Manitoba</option>
\t \t \t \t <option value="NB">New Brunswick</option>
\t \t \t \t <option value="NL">Newfoundland and Labrador</option>
\t \t \t \t <option value="NT">Northwest Territories</option>
\t \t \t \t <option value="NS">Nova Scotia</option>
\t \t \t \t <option value="NU">Nunavut</option>
\t \t \t \t <option value="PE">Prince Edward Island</option>
\t \t \t \t <option value="QC">Quebec</option>
\t \t \t \t <option value="SK">Saskatchewan</option>
\t \t \t \t <option value="YT">Yukon</option>
\t \t \t </select>
\t \t </div>
\t </div>
\t <div class="form-group">
\t \t <label class="control-label col-sm-2" for="zip">Postal Code:</label>
\t \t <div class="col-sm-10">
\t \t \t <input type="text" class="form-control" id="zip"
\t \t \t \t placeholder="Postal Code" name="zip">
\t \t </div>
\t </div>
\t <div class="form-group">
\t \t <label class="control-label col-sm-2" for="night_phone_a">Phone:</label>
\t \t <div class="col-sm-10">
\t \t \t <div class="form-group phone-number">
\t \t \t \t <div class="col-xs-3">
\t \t \t \t \t <input type="tel" name="night_phone_a" class="form-control"
\t \t \t \t \t \t value="" size="3" maxlength="3">
\t \t \t \t </div>
\t \t \t \t <div class="col-xs-3">
\t \t \t \t \t <input type="tel" name="night_phone_b" class="form-control"
\t \t \t \t \t \t value="" size="3" maxlength="3">
\t \t \t \t </div>
\t \t \t \t <div class="col-xs-4">
\t \t \t \t \t <input type="tel" name="night_phone_c" class="form-control"
\t \t \t \t \t \t value="" size="4" maxlength="4">
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t <div class="form-group">
\t \t <div class="col-sm-offset-2 col-sm-10">
\t \t \t <button type="submit" class="btn btn-default submit">Submit</button>
\t \t </div>
\t </div>
</div>私は最初のCOL-MD-6にプルライトを使用してみましたが、私はまた、テキスト右、それらのどちらも仕事を試してみました。最初のcol-md-6のフィールドを右に並べるにはどうすればよいですか？
あなたはおそらく右に 'ブートストラップでdiv'sをコンテンツをフロートする必要があります。私は 'text-right'を効果的にレンダリングしていないので、' input'や '.form-group'には追加のスタイル（ブロックレベルまたはアラインメント）があるので、' text-right'が動作していないと思います。おそらく '#formID>のようなものです。div：最初の型.form-group {float：right; } 'これを最初の/左の列にのみ適用します – WOUNDEDStevenJones
リクエストは不明です。それぞれの 'form-group'は既にブートストラップのグリッドシステムに固有のパディングを除いて、カラム幅の100％を占めています。各列の間隔が狭くなるようにパディングを削除したいだけですか？ –
しかし、最初の '.col-md-6'の' .text-right'は、テキストをラベルの右に揃えます。私はその問題が何かを理解していません。 https://jsfiddle.net/f9jcebr2/show –