Html 引导中的一行中有多个文本框

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

我正在努力让“国内”这一行先起作用。其他行的外观完全符合我的要求，但这只是因为我作弊并在其中添加了“宽度：49%”样式。然而，这样做破坏了文本框的完全响应特性，我想保留它

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

国内的

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

基本上，我所要做的就是将行拆分为三分之一，三分之一用于标签，三分之一用于第一个文本框，三分之一用于第二个文本框（如果这样做有效的话，希望我可以在xs显示器上为每个控件工作一行）

有什么想法吗

编辑：根据要求，这是我在“美国运通”行的代码-

美国运股票交易所

---

我将使用一个已经构建的框架来处理它，而不是试图将三列布局组合在一起。我推荐丹·伊登的吐司

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

正如他在文档中所说，在你的头脑中链接：

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

---

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

确保正确关闭输入标签。当前您缺少结束标记

/>

。请同时发布下两行的html

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

---

您正在创建的表单很复杂。文档中没有在最宽的列中嵌套列的.form水平的示例。您也缺少输入组的正确html。因为有很多包装器，所以最好缩进代码并对其进行注释

您需要做的是在最宽的列中使用网格系统，因为您需要两个50%的列，所以您只需要在所需的断点处使用

.col-X-6

。在本例中，您希望列以col md min width并排排列，即992px

而且，col-X-12类通常是不必要的。元素的宽度将比使用的最后一个列类低100%。具有.col-md-4的元素将在该值下为100%，您不必通过添加额外且不必要的类col-sm-12或col-xs-12来告诉它为100%

演示： CSS 当窗体堆叠在“最小宽度”类选项之下时，这会增加一些垂直空间

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

国内的
@
@
美国运股票交易所
@
@
保险费
@
@

感谢您指出缺失的结束标记。我已经用“美国运通”行的代码更新了我的问题。“特优”行与“美国运通”行相同。看起来非常漂亮。谢谢你的提示。

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

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