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分，第一个文本框为1/3，第二个文本框为1/3（然后，如果有效，希望我可以得到它在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 当表单堆叠在min-width类选择下方时，这会添加一些垂直空间。

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

Answer 2

我不会试图破解三列布局，而是使用已构建的框架来处理它。我推荐Dan Eden的Toast：https://github.com/daneden/Toast。

它将帮助您创建一个响应且不会中断的三列布局。

正如他在文档中所说的那样，将这个链接在你的脑海中：

<link rel="stylesheet" href="css/toast/grid.css">

然后使用以下格式创建布局：

<div class="container">
      <div class="grid">
            <div class="grid__col grid__col--1-of-4">

            </div>
            <div class="grid__col grid__col--3-of-4">

            </div>
            <div class="grid__col grid__col--6-of-12">

            </div>
      </div>
</div>

他的描述中有更具体的说明。

Answer 3

确保正确关闭输入标签。目前您缺少结束标记/>。还请将你的html发布到接下来的两行。

<input id="flat" class="form-control" type="text" placeholder="Flat (eg. 0.33)" />