Question

我正在使用两行。在每一行中，都有两列完整大小为Entities的列。在第一列中有2个字段，另一列中有1个字段。现在，我将这些相同的2放在另一行中。所有列均未对齐：这是代码段：

JSON

所以我的问题是为什么引导程序在给定的代码片段中未对齐指定的列行？

Answer 1

您是否正在尝试执行类似的操作？我不记得引导程序是否可以帮您做到这一点。很抱歉，如果我误解了这个问题。

label {
display:table;
width:90px;
float:left;
text-align:center;
}

<div class="row"> 
  <div class="col-md-12">
     <div class="col-md-3">
       <div class="form-group">
            <label for="description">Description</label>
         <select class="selectpicker" data-live-search="true">
                                                        <option>Android</option>
                                                        <option>iOS</option>
                                                        <option>Windows</option>
                                                        <option>Symbian</option>
                                                        <option>Atari TOS</option>
                                                        <option>Amiga OS</option>
                                                        <option>Unix</option>
                                                        <option>Linux</option>
                                                        <option>OSX</option>
 </select>
  <div class="input-error form-control-input" style="color: Red; display: none;">Description is required</div>
  </div>
    </div> 
                           
  <div class="col-md-3">
    <div class="form-group">
      <label for="group">Issue Date</label>
    <input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
      <div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
       </div>

   </div>    
                            
       <div class="col-md-3">
        <div class="form-group">
            <label for="group">Expiry Date</label>
                 <input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
                <div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
              </div>
        </div>
                            
                        </div>
        <div class="col-md-12">
                            <div class="col-md-3">
                                <div class="form-group">
                                                    <label for="reference">Reference</label>
                                                    <input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
                                                    <div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
                                                </div>
                                </div>
                            </div>
                        </div>
                </div>

                <div class="row">
                <div class="col-md-12">
                      <div class="col-md-3">
                         <div class="form-group">
                           <label for="reference">Reference</label>
                                <input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
                            <div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
                                                </div>
                                </div>
                            </div>
                        </div>
                </div>

Answer 2

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
  <div class="row"> 
  <div class="col-md-12">
     <div class="col-md-3">
       <div class="form-group">
            <label for="description">Description</label>
         <select class="selectpicker" data-live-search="true">
                                                        <option>Android</option>
                                                        <option>iOS</option>
                                                        <option>Windows</option>
                                                        <option>Symbian</option>
                                                        <option>Atari TOS</option>
                                                        <option>Amiga OS</option>
                                                        <option>Unix</option>
                                                        <option>Linux</option>
                                                        <option>OSX</option>
 </select>
  <div class="input-error form-control-input" style="color: Red; display: none;">Description is required</div>
  </div>
    </div> 
                           
  <div class="col-md-3">
    <div class="form-group">
      <label for="group">Issue Date</label>
    <input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
      <div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
       </div>

   </div>    
                            
       <div class="col-md-3">
        <div class="form-group">
            <label for="group">Expiry Date</label>
                 <input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
                <div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
              </div>
        </div>
                            
                        </div>
        <div class="col-md-12">
                            <div class="col-md-3">
                                <div class="form-group">
                                                    <label for="reference">Reference</label>
                                                    <input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
                                                    <div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
                                                </div>
                                </div>
                            </div>
                        </div>
                </div>

                <div class="row">
                <div class="col-md-12">
                      <div class="col-md-3">
                         <div class="form-group">
                           <label for="reference">Reference</label>
                                <input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
                            <div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
                                                </div>
                                </div>
                            </div>
                        </div>
                </div>   
	
</body>

此代码只是您的代码片段的副本，我刚刚将CDN链接放置到引导CSS，该引导CSS对我来说都是对齐的

Answer 3

我希望这会有所帮助。 N.B.我认为您有两个</div>标签，该标签不应存在（请检查示例中的注释），同时请记住，您应该具有唯一的ID（与您的问题无关，但可能会有所帮助，我希望）

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div class="row">
  <div class="col-md-12">
    <div class="col-md-3">
      <div class="form-group">
        <label for="description">Description</label>
        <select class="selectpicker" data-live-search="true">
          <option>Android</option>
          <option>iOS</option>
          <option>Windows</option>
          <option>Symbian</option>
          <option>Atari TOS</option>
          <option>Amiga OS</option>
          <option>Unix</option>
          <option>Linux</option>
          <option>OSX</option>
        </select>
        <div class="input-error form-control-input" style="color: Red; display: none;">Description is required</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group">
        <label for="group">Issue Date</label>
        <input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
        <div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group">
        <label for="group">Expiry Date</label>
        <input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
        <div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
      </div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="col-md-3">
      <div class="form-group">
        <label for="reference">Reference</label>
        <input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
        <div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
      </div>
    </div>
  </div>
</div>
<!--</div>  you should delete this closing div -->
	
 <div class="row">
  <div class="col-md-12">
    <div class="col-md-3">
      <div class="form-group">
        <label for="reference">Reference</label>
        <input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
        <div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
      </div>
    </div>
  </div>
</div>
<!--</div>  you should delete this closing div -->

如何对齐两行中的列？

3 个答案: