Bootstrap 中单行中的多个文本框

Question

我正在使用 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>

当我在表单上运行验证并开始显示这些输入组插件时，事情变得更加梨形 -

我本质上想做的就是将行分成三分之一，三分之一用于标签，三分之一用于第一个文本框，三分之一用于第二个文本框（然后，如果可行，希望我可以让它工作 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>

Answer 1

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

您需要做的是在最宽的列内使用网格系统，并且由于您需要两个 50% 的列，因此您只需.col-X-6在所需的断点处使用 a 。在本例中，您希望列以 col-md 最小宽度（即 992 像素）并排。

而且，很多时候 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
    }
}

超文本标记语言

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