如何對齊引導窗體輸入

Question

我想對齊我的模態中的一些輸入。我正在試圖以適當的方式設置這一點。我看過並找到了很多例子，但他們沒有和我一起工作。我瞭解bootstrap網站說使用form-inline，但我不需要像這樣的整個表單設置。我只想讓城市/州/郵編相互嵌套。你也會在右上角看到一個複選框。我已經將它向右移動了一點，但是它會擾亂它的響應速度。做這個的最好方式是什麼？ plunkr

<div class="form-group clearfix inline"> 
     <label class="col-sm-3 control-label text-right">City</label> 
     <div class="col-sm-9"> 
     <input style="width:200px" ng-model="customer.city" type="text" class="form-control input-md"> 
</div> 

     <label class="col-sm-3 control-label text-right" for="customerSt">State</label> 
     <div class="col-sm-9"> 
      <select style="width:200px" ng-model="customer.st" class="form-control" ng-options="s.abbr as s.name for s in states"> 
      <option value="">-- Select a State --</option> 
      </select> 
     </div> 

     <label class="col-sm-3 control-label text-right">Zipcode</label> 
       <div class="col-sm-9"> 
       <input style="width:200px" ng-model="customer.zip" type="text" class="form-control input-md"> 
       </div> 
     </div> 

複選框

<div class="form-group clearfix" style="margin-left:520px"> 
    <label class="col-sm-3 control-label text-right">Status</label> 
    <div class="col-sm-9"> 
     <input style="width:50px" type="checkbox" ng-model="job.status" value="" class="form-control"> 
    </div> 

Answer 1

你需要修改一個小小的CSS並使用嵌套列。

這在形式嵌套列的一個例子。你可以使用相同的想法來調整你的表單。

DEMO：http://jsbin.com/kemumu/1/

關於你與保證金推到位的複選框。如果它看起來好於900px，但在這個寬度下很奇怪，那麼把css放在一個看起來不錯的最小寬度媒體查詢中，並將它從媒體查詢中移除。

注：.form-group提出當窗體被堆疊（在更小的視區）一些很好的垂直間距，但它也作用就像一個.row（連同其負-left和右漢字邊距），所以當它被用來在此CSS一列（如我所做的）得到調整。再加上30px的陰影線對於表單來說太大了。

有沒有必要把.clearfix放在你的.form-group s，除非你因爲某種原因將它們漂浮。

CSS實例：

.custom-form [class*="col-"].form-group {margin-left:0;margin-right:0;} 

.custom-form .form-group [class*="col-"] .row [class*="col-"] { 
    padding-left: .5%; 
    padding-right: .5%; 
} 
.custom-form .form-group [class*="col-"] .row { 
    margin-left: -.5%; 
    margin-right: -.5%; 
} 

HTML實例：

<form class="form-horizontal custom-form" role="form"> 

    <div class="form-group"> 
    <label class="col-sm-3 control-label">Card Holder's Name</label> 
    <div class="col-sm-9"> 

    <div class="row"> 

    <div class="col-sm-6 form-group"> 
     <input type="text" class="form-control" autocomplete="off" maxlength="4" placeholder="First Name" required> 
    </div><!--nested col-sm-6--> 

    <div class="col-sm-6 form-group"> 
     <input type="text" class="form-control" autocomplete="off" maxlength="4" placeholder="Last Name" required> 
    </div><!--nested col-sm-6--> 

    </div><!-- /.form-group > .row --> 
    </div><!-- /.col-sm-9 --> 
    </div><!-- /.form-group --> 

    <div class="form-group"> 
    <label class="col-sm-3 control-label">Credit Card Number:</label> 
    <div class="col-sm-9"> 
    <div class="row"> 
    <div class="col-sm-3 form-group"> 
     <input type="text" class="form-control" autocomplete="off" maxlength="4" pattern="\d4" placeholder="1st four digits" required> 
    </div> 
    <!--nested col-sm-3--> 

    <div class="col-sm-3 form-group"> 
     <input type="text" class="form-control" autocomplete="off" maxlength="4" pattern="\d4" placeholder="2nd four digits" required> 
    </div> 
    <!--nested col-sm-3--> 

    <div class="col-sm-3 form-group"> 
     <input type="text" class="form-control" autocomplete="off" maxlength="4" pattern="\d4" placeholder="3rd four digits" required> 
    </div> 
    <!--nested col-sm-3--> 

    <div class="col-sm-3"> 
     <input type="text" class="form-control" autocomplete="off" maxlength="4" pattern="\d4" placeholder="4th four digits" required> 
    </div> 
    <!--nested col-sm-3--> 

    </div><!-- /.form-group > .row --> 
    </div><!-- /.col-sm-9 --> 
    </div><!-- /.form-group --> 

    <div class="form-group"> 
    <label class="col-sm-3 control-label">Expiration Date:</label> 
    <div class="col-sm-9"> 
    <div class="row"> 
    <div class="col-sm-9 form-group"> 
     <select class="form-control"> 
     <option>January</option> 
     <option>...</option> 
     <option>December</option> 
     </select> 
    </div> 
    <!--nested col-sm-9--> 

    <div class="col-sm-3 form-group"> 
     <select class="form-control"> 
     <option>2013</option> 
     <option>...</option> 
     <option>2015</option> 
     </select> 
    </div> 
    <!--nested col-sm-3--> 

    </div><!-- /.form-group > .row --> 
    </div><!-- /.col-sm-9 --> 
    </div><!-- /.form-group --> 

    <div class="form-group"> 
    <label class="col-sm-3 control-label">CVV Code:</label> 

    <div class="col-sm-9"> 
    <div class="row"> 

    <div class="col-sm-4"> 
     <input type="text" class="form-control" autocomplete="off" maxlength="3" pattern="\d3" placeholder="3 digits on back of card" required> 
    </div><!--nested col-sm-4--> 


    </div><!-- /.form-group > .row --> 
    </div><!-- /.col-sm-9 --> 
    </div><!-- /.form-group --> 

    <div class="form-group"> 
    <div class="col-sm-offset-3 col-sm-9"> 
    <button type="submit" class="btn btn-primary btn-custom">Submit</button> 
    <button type="button" class="btn btn-default btn-custom">Cancel</button> 
    </div><!-- /.col-sm-offset-3 col-sm-9 --> 
    </div><!-- /.form-group --> 

</form><!-- /.form-horizontal --> 

</div><!-- /.container --> 

**

Answer 2

如果你想在你的網站的響應，然後做出/添加不同的CSS，並將它們添加到不同卵石大小..例如..

<h2 class="visible-sm visible-md visible-lg">Some text here</h2> 

上面的h2標題只會顯示在平板電腦上，s智能電視，筆記本電腦的臺式機等等....

<h4 class="visible-xs">Some text here</h4> 

當你看到像智能手機的，或更小的設備相同的標題，然後按照指定的，只顯示在小型設備上調整其大小.. ..

注：請閱讀響應here的Twitter的引導文件

Answer 3

我不得不添加一些自定義的CSS類來做到這一點。例如

@media (min-width: 768px) { 
    .input-inline .form-group { 
    display: inline-block; 
    margin-bottom: 0; 
    vertical-align: middle; 
    } 
    .input-inline .form-control { 
    display: inline-block; 
    } 
    .input-inline select.form-control { 
    width: auto; 
    } 
    .input-inline .radio, 
    .input-inline .checkbox { 
    display: inline-block; 
    margin-top: 0; 
    margin-bottom: 0; 
    padding-left: 0; 
    } 
    .input-inline .radio input[type="radio"], 
    .input-inline .checkbox input[type="checkbox"] { 
    float: none; 
    margin-left: 0; 
    } 
} 
} 

因此，不，我不會在我的表單中添加form-inline類。當我需要一個內嵌輸入我寫：

<div class="form-group input-inline"> 
    <label class="sr-only" for="exampleInputEmail2">Email address</label> 
    <input type="text" class="form-control"> 
<div> 

我可能會錯過複製從我的代碼的東西，但這樣的總體思路。您只需從引導.form-inline值中複製並用.input-inline替換即可。