如何对齐引导程序表单输入

时间：2014-10-26 15:52:01

标签： css twitter-bootstrap

我试图在我的模态中对齐一些输入。我试图以正确的方式设置它。我看了很多例子，但他们没有和我合作。我知道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>

3 个答案:

答案 0 :(得分：3)

您需要修改一个小css并使用嵌套列。

enter image description here

这是在表单中嵌套列的示例。您可以使用相同的想法来调整表单。

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

关于您使用保证金推送到位的复选框。如果它在900px看起来很好但在该宽度下看起来很奇怪，那么将css放在最小宽度的媒体查询中，它看起来很好并在媒体查询之外删除它。

注意：.form-group在堆叠表单时（在较小的视口中）放置一些漂亮的垂直间距，但它也像.row一样（带有负 - 左和右边距），所以这个css在列上使用时（正如我所做的那样）得到调整。另外，30px的装订线对于表格来说太大了。

除非您出于某种原因浮动.clearfix，否则无需将.form-group放在.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%; } 上。

CSS示例： 

<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 -->

HTML示例： 

{{1}}

**

答案 1 :(得分：1)

如果您想要在您的网站中提供响应，请制作/添加不同的CSS并将其添加到不同的scree大小..例如.. 

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

以上h2标题仅显示在平板电脑，智能电视，笔记本电脑的台式机等上.... 

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

如果您在智能手机等小型设备上看到相同的标题，或者更小，那么它会根据指定的尺寸调整尺寸，仅在小型设备上显示....

注意：请阅读有关响应能力的here

的twitter bootstrap文档

答案 2 :(得分：0)

我必须添加一些自定义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>

我可能错过了从代码中复制的东西，但这是一般的想法。您只需要从bootstrap复制.form-inline值并将其替换为.input-inline。

相关问题
最新问题