Question

我有这个html表单。它有电话号码，ic号码（1行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>

Answer 1

使用

<div class="row">
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
</div>

Answer 2

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

Answer 3

您可以使用以下代码：

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

参考：https://getbootstrap.com/docs/4.0/layout/grid/

html align 3 div＆＃39; form-group＆＃39;盒子在一起：bootstrap-3.3.0

3 个答案: