引导网格布局对齐面临的问题

时间:2020-11-06 05:54:34

标签: css bootstrap-4

我正面临引导对齐问题。我正在使用引导网格布局并创建行

 <form>
           <div class="form-row">
                    <div class=" form-group col-md-3">
                        <label for="DDA">TypeA</label>
                        <select class="form-control ">
                            <option value="1">C</option>
                            <option value="2">D</option>
                        </select>
                    </div>
                    <div class=" form-group col-md-3 ">
                        <label for="inputStatus">Status</label>
                        <input type="text" class="form-control" id="inputStatus" autocomplete="off" placeholder="Please select Status" />
                       
                    </div>
                    <div class=" form-group col-md-3">
                        <label for="reportDsply">Report Type</label><br />
                        <select class="form-control" id="reportDsply">
                           <option value="1">S</option>
                          <option value="2">F</option> 
                         </select>
                    </div>
                    <div class="col-md-3 ">
                        <label class="radio-inline">
                            <input id="chckbxCol" type="checkbox" class="dropdown-item-checkbox"> Include ColumnA
                        </label>
                    </div>
                </div>
    <div class="form-row" >
            
              <div class=" form-group col-md-3" >
                  <label for="ColumnA">TypeB</label>
                  <select class="form-control " id="ColumnA">
                      <option value="1">A</option>
                      <option value="2">B</option>
                  </select>
              </div>
              <div class=" form-group col-md-3">
                  <label for="Dsply">Display</label><br />
                  <label class="radio-inline"><input type="radio"  name="rptradio" checked>CompleteDetail</label>
                  <label class="radio-inline"><input type="radio" name="rptradio">Partial</label>
              </div>
              <div class=" form-group col-md-3 ">
                  <label for="Type">Type</label>
                  <select class="form-control" id="Type" width="125px">
                      <option value="4">Insert</option>
                      <option value="5">Update</option>
                  </select>
              </div>
              <div class="  col-md-1">
                  <button type="button" id="btnShow" class="btn btn-success">Show</button>
              
              </div>

              <div class=" col-md-2">
                  <div class="btn-group">
                      <button type="button" id="btnSave" class="btn btn-success"><span class="glyphicon glyphicon-floppy-save"></span></button>
                     
                  </div>
              </div>
          </div>
 </form>

enter image description here

我不确定为什么TypeB到达第一行的末尾并且未对齐,如上图所示。请让我知道如何将其推送到Type A下拉菜单下的下一行,以便所有内容都能正确对齐。

请让我知道要使用哪个类正确对齐

0 个答案:

没有答案