如何对齐引导窗体输入

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替换即可。