Bootstrap中一行内多个文本框

Question

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

我正在努力让“国内”行先工作。其他行看起来正是我想要的样子，但这只是因为我作弊并向它们添加了“width: 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>

当我对表单进行验证并开始显示那些输入组附加项时，情况变得更加糟糕 -

我所要做的基本上是将行分成三个部分，一个用于标签，一个用于第一个文本框，一个用于第二个文本框（然后，如果可以，在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>

- Paul McLean

Answer 1

你正在创建的表格很棘手。文档中没有关于最宽列内嵌套列的.form-horizontal示例。你还缺少了input-group的正确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) -->

- Christina

Answer 2

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

它将帮助您创建一个响应式的、不会崩溃的三列布局。

如文档中所述，在head标签中添加以下链接：

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

在他的说明中有更具体的指示。

- user3857868

---

看起来非常不错。谢谢你的提示。 - scharfmn

Answer 3

请确保正确地关闭输入标签。您当前缺少闭合标签/>。请同时发布下面两行的html代码。

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

- edita

---

感谢您指出缺少的闭合标签。我已经更新了我的问题，并提供了“Amex”行的代码。 “Premium”行与“Amex”行相同。 - Paul McLean