输入字段未正确对齐

Question

我有一个表单，里面有Bootstrap 4的输入和下拉菜单。 我有几个输入字段及其标签，但是在一个地方我想用输入字段替换标签，但是下面的输入字段和我要放入的输入字段相互冲突。我要在它们之间留出空间。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <label for="categoryCode">Uber Eats</label>
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <label for="subCategoryCode">ABCD1</label>
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <label for="subCategoryCode">ABCD</label>
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
  </div>
</div>

在ABCD1处，我想要一个输入字段，该字段应与下面的字段分开。

我正在做的是放置在ABCD1的标签上的地方，我放在上面：`

<div class="input-group">
                    <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>

                    </div>
                </div>`

但是输出不是我期望的

它们之间必须有一定的空间，并且应该与其他标签的行Uber eats和ABCD

对齐

Answer 1

添加了margin引导类来实现它

https://codepen.io/Xenio/pen/daKPNa 777

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <label for="categoryCode">Uber Eats</label>
      <div class="input-group mt-3">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group mb-2">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
         </div>
      </div>
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <label for="subCategoryCode">ABCD</label>
      <div class="input-group mt-3">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

先前发生未对齐的原因是，您已获取了第一行标签，并且 将第一个输入组行变成一个“表单行”。 只需将它们分成不同的“表单行”，然后一切都按预期返回。

    <!DOCTYPE html>
<html>
 <head>
  <title>test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
 </head>
 <body>
  <div class="container">

   <!-- Added separate form row for first row which includes labels and one new group -->
   <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <label for="categoryCode">Uber Eats</label>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <label for="categoryCode">Uber Eats</label>
    </div>
   </div>
   <!-- Separated the input groups -->
   <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
   </div>
   <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
   </div>
   <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
   </div>
   <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
   </div>
   <div class="form-row">
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
    <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-4">
     <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-append">
       <button class="btn btn-outline-secondary " type="button" aria-haspopup="true" aria-expanded="false"></button>
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>