html - Bootstrap 一行中的多个文本框

Question

我正在使用 Bootstrap 尝试将 2 个文本框放在标签旁边，全部放在一行中，但是，我似乎无法让所有内容都正确排列。

我正在努力让“国内”行首先运行。其他行看起来正是我希望它们看起来的样子，但这只是因为我作弊并向它们添加了“宽度:49%”的样式。但是，这样做会破坏我想要保留的文本框的完全响应特性。

您会注意到，对于“Domestic”行，标签不与其下方的行对齐，而且两个文本框也不对齐。这是我的“国内”行代码 -

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

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

我基本上想做的就是将行分成三份，三分之一用于标签，三分之一用于第一个文本框，三分之一用于第二个文本框(然后，如果可行，希望我能得到它在 xs 显示器上每个控件工作 1 行)。

有什么想法吗？

编辑:根据要求，这是我的“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。在这种情况下，您希望列以 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) -->