Bootstrap的一行中有多个文本框

保罗·麦克林

我正在使用Bootstrap尝试在标签旁边放置2个文本框，所有文本框都放在一行上，但是，我似乎无法使所有内容正确对齐。

我正在努力使“国内”行首先工作。其他行完全按照我希望它们的外观显示，但这仅是因为我作弊并向它们添加了一种“宽度：49％”的样式。但是，这样做会破坏文本框的完全响应性，而我想保留这些文本框。

您会注意到，对于“本地”行，标签与下面的行不对齐，并且两个文本框都不对齐。这是我的“本地”行的代码-

<div class="row">
<div class="form-horizontal">
    <div class="form-group col-md-12 col-xs-12">
        <div class="col-md-4 col-xs-12">
            <label class="control-label">Domestic</label>
        </div>
        <div class="col-md-4 col-xs-12">
            <input id="percentage" class="form-control" type="text" placeholder="Percentage">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </span>
        </div>
        <div class="col-md-4 col-xs-12">
            <input id="flat" class="form-control" type="text" placeholder="Flat (eg. 0.33)">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </span>
        </div>
    </div>
</div>

当我在表单上运行验证并开始显示那些input-group-addons时，事情变得更加糟糕了-

我基本上想做的就是将行分成三部分，标签占三分之一，第一个文本框占三分之一，第二个文本框占三分之一（然后，如果可行，希望我可以将其用于1 xs显示器上每个控件的行）。

有任何想法吗？

编辑：根据要求，这是我的“ Amex”行的代码-

<div class="row">
<div class="form-group col-md-12 col-xs-12">
    <label class="col-md-4 col-xs-12 control-label">Amex</label>
    <div class="input-group col-md-8 col-xs-12 form-inline">
        <div class="input-group" style="width: 49%;">
            <input id="amexPercentage" class="form-control" type="text" placeholder="Percentage">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </span>
        </div>
        <div class="input-group" style="width: 49%;">
            <input id="amexFlat" class="form-control" type="text" placeholder="Flat (eg. 0.33)">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </span>
        </div>
    </div>
</div>

克里斯蒂娜（Christina）

您创建的表单很棘手。在.form-horizontal的文档中没有示例，其中最宽列内有嵌套列。您也缺少输入组的正确html。由于有很多包装器，因此最好缩进代码并对其进行注释。

您需要做的是在最宽的列内使用网格系统，并且由于您需要两个50％的列，因此您只需要.col-X-6在所需的断点处使用a即可。在这种情况下，您希望并列显示的列是col-md最小宽度，即992px。

同样，通常不需要col-X-12类。元素的宽度将比最后使用的列类低100％。带有.col-md-4的元素将是100％，您不必通过添加额外且不必要的类col-sm-12或col-xs-12来将其声明为100％

在此处输入图片说明

演示：https : //jsbin.com/yojoci

CSS 当表单在最小宽度类选择以下堆叠时，这会增加一些垂直空间。

@media (max-width:991px) { 
    .form-horizontal.custom-form .form-group .row [class*=col-]:first-child {
        margin-bottom: 5px
    }
}

的HTML

 <div class="container">
   <form class="form-horizontal custom-form" role="form">
   
      <div class="form-group">
         <label class="col-sm-2 control-label">Domestic</label>
         <div class="col-sm-10">
            <div class="row">
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text One">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Two">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
            </div>
            <!--/.row -->
         </div>
         <!--/.col-sm-10 -->
      </div>
      <!--/.form-group -->
      
      
      <div class="form-group">
         <label class="col-sm-2 control-label">Amex</label>
         <div class="col-sm-10">
            <div class="row">
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Three">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Four">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
            </div>
            <!--/.row -->
         </div>
         <!--/.col-sm-10 -->
      </div>
      <!--/.form-group -->
      
      
      <div class="form-group">
         <label class="col-sm-2 control-label">Premium</label>
         <div class="col-sm-10">
            <div class="row">
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Five">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
               <div class="col-md-6">
                  <div class="input-group">
                     <input type="text" class="form-control" placeholder="Text Six">
                     <span class="input-group-addon">@</span>
                  </div>
                  <!-- /.input-group -->
               </div>
               <!-- /.col-md-6 -->
            </div>
            <!--/.row -->
         </div>
         <!--/.col-sm-10 -->
      </div>
      <!--/.form-group -->
      
  </form>
</div>
<!--/.container (DON'T NEST) -->

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。