html align 3 div'；表格组'；盒子放在一起：bootstrap-3.3.0

我有这个html表单。它有电话号码、ic号码（一行有3个方框）和公司名称。 当缩放为零时，电话号码+ICnumber+公司都在一行中对齐。当我增加/减少缩放时，ic号码框不再与电话号码框和公司名称对齐

如何将所有3个对齐在一起

更正：使用bootstrap-3.3.0.min.css为错误的标记道歉

                <!-- show phone number -->
               <div class="form-group">
                    <input id="registerphonenumber" type="text" th:field="*{phoneNumber}" class="form-control block-centered login-input" placeholder="Phone Number" required>
                    <div class="help-block with-errors txt-centered"></div>
                </div>

                 <!-- show IC NUMBER -->
                <div class="form-group" style="color:#0000FF; margin-left:160px;" >

                   <input type="hidden" id="fullIc" th:field="*{icNumber}" maxlength="6" size="6" required/>


                    <div class="form-inline">
                        <input type="text"
                        placeholder="YYMMDD" id="myKadA" maxlength="6" style="width:90px !important" onchange="checkMyKad()" size="8"  class="form-control block-centered ic-input" required>                        
                        -
                        <input type="text"
                        placeholder="PB" id="myKadB"  maxlength="2"  style="width:60px !important" onchange="checkMyKad()" size="2" class="form-control block-centered ic-input" required>                        
                        -
                        <input type="text"
                            data-equals="test"
                            placeholder="####" id="myKadC" class="control" style="width:60px !important" onchange="checkMyKad()" 
                            maxlength="4" size="10"
                            class="form-control block-centered ic-input" 
                            required>
                    </div>

                    <p style="text-align:left" class="notice-on-error" id="myKadErrorMsg"></p>

                    <div class="help-block with-errors txt-centered"></div>
                </div>

               <!-- show company name. -->
               <div class="form-group">
                    <input id="registerCompanyName" type="text" th:field="*{userProfile.companyProfile.companyName}" class="form-control block-centered login-input" placeholder="Company">
                    <div class="help-block with-errors txt-centered"></div>
                </div>

-
-

使用

电话号码
IC编号
公司名称

您可以使用以下代码：

<div class="container">
   <div class="row">
     <div class="col-md-4"> One of three columns </div>
     <div class="col-md-4"> One of three columns </div>
     <div class="col-md-4"> One of three columns </div>
   </div>
</div>

三列之一
三列之一
三列之一

---

参考资料：

这不起作用。ic编号块中的3个框完全对齐，而不是并排对齐。您也可以使用列sm强制它们对齐。为什么要使用较大的左边距和固定的输入宽度？请阅读表单布局上的文档：引导4中没有列xs-，而使用列sm-，相同列大小的md和lg是不必要的冗余。

<div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">phone number</div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavenderblush;">IC NUMBER</div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">company name</div>
  </div>

<div class="container">
   <div class="row">
     <div class="col-md-4"> One of three columns </div>
     <div class="col-md-4"> One of three columns </div>
     <div class="col-md-4"> One of three columns </div>
   </div>
</div>