css 如何使用bootstrap 5垂直对齐不同行的输入？

ecbunoof 于 2023-04-01 发布在 Bootstrap

关注(0)|答案(2)|浏览(167)

我正在创建一个输入表单。第一行包含一列，
第二行包含2列，
第三行包含3列。
每列有标签和输入
当我尝试创建表单时，输入的开始与每一行都不同。
尝试使用align-self-center order-2，但不起作用

源代码

<div class="row mt-3">
  <div class="col-md-12">
    <div class="row mb-3">
      <div class="col-md-2 col-xs-2">
        <label for="Nationality" class="required control-label col-form-label">Nationality</label>
      </div>
      <div class="col-md-10 col-xs-10 align-self-center order-2">
        <input type="text" class="form-control" name="Nationality" id="Nationality" >
      </div>
    </div>
  </div>
</div>

<div class="row justify-content-center mt-3 align-items-center">
  <div class="col-md-6">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="maritalStatus" class="required control-label col-form-label">maritalStatus</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="maritalStatus" name="maritalStatus">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="education" class="required control-label col-form-label">Educaiton</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="education" name="education">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
</div>

<div class="row justify-content-center mt-3 align-items-center">
  <div class="col-md-4">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="GHI" class="required control-label col-form-label">GHI</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="GHI" name="GHI">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="DEF" class="required control-label col-form-label">DEF</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="DEF" name="DEF">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
  
  <div class="col-md-4">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="ABC" class="required control-label col-form-label">ABC</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="ABC" name="ABC">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
</div>

结果

从下面的代码中，我如何使每行的输入开始是垂直对齐的，并使它看起来更好？有没有什么方法可以使用bootstrap中的类来支持它？

css

来源：https://stackoverflow.com/questions/75895809/how-to-vertically-align-input-from-different-row-using-bootstrap-5

2条答案

按热度按时间

bbmckpt71#

再添加一个div，并将wrapper类作为父div。同时添加Flex对齐类，用于垂直和水平对齐。给予'height：100 vh;'在 Package 器类中，如下面的代码。
.wrapper {height：100vh;}

<div class="row mt-3">
  <div class="col-md-12">
    <div class="row mb-3">
      <div class="col-md-2 col-xs-2">
        <label for="Nationality" class="required control-label col-form-label">Nationality</label>
      </div>
      <div class="col-md-10 col-xs-10 align-self-center order-2">
        <input type="text" class="form-control" name="Nationality" id="Nationality" >
      </div>
    </div>
  </div>
</div>

<div class="row justify-content-center mt-3 align-items-center">
  <div class="col-md-6">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="maritalStatus" class="required control-label col-form-label">maritalStatus</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="maritalStatus" name="maritalStatus">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="education" class="required control-label col-form-label">Educaiton</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="education" name="education">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
</div>

<div class="row justify-content-center mt-3 align-items-center">
  <div class="col-md-4">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="GHI" class="required control-label col-form-label">GHI</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="GHI" name="GHI">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="DEF" class="required control-label col-form-label">DEF</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="DEF" name="DEF">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
  
  <div class="col-md-4">
    <div class="row mb-3 justify-content-center">
      <div class="col-md-5 col-xs-5">
        <label for="ABC" class="required control-label col-form-label">ABC</label>
      </div>
      <div class="col-md-7 col-xs-7">
        <select class="form-control selecting" id="ABC" name="ABC">
          <option value=""></option>
          <option value="a">a</option>
          <option value="b">b</option>
        </select>
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-04-01

9gm1akwq2#

在这里，您需要将所有列添加到一行中并使用列分隔符。然后，为所有标签列添加相同的列宽（例如：col-md-2）. as Setting one column width

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<div class="row g-2 g-md-3 align-items-center">
  <div class="col-md-2">
    <label for="Nationality" class="required control-label col-form-label">Nationality</label>
  </div>
  <div class="col-md">
    <input type="text" class="form-control" name="Nationality" id="Nationality" >
  </div>
  
  <div class="w-100"></div> <!-- Force next columns to break to new line -->
  
  <div class="col-md-2">
    <label for="maritalStatus" class="required control-label col-form-label">maritalStatus</label>
  </div>
  <div class="col-md">
    <select class="form-control selecting" id="maritalStatus" name="maritalStatus">
      <option value=""></option>
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
  </div>
  
  <div class="col-md-2">
    <label for="education" class="required control-label col-form-label">Educaiton</label>
  </div>
  <div class="col-md">
    <select class="form-control selecting" id="education" name="education">
      <option value=""></option>
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
  </div>
  
  <div class="w-100"></div> <!-- Force next columns to break to new line -->
  
  <div class="col-md-2">
    <label for="GHI" class="required control-label col-form-label">GHI</label>
  </div>
  <div class="col-md">
    <select class="form-control selecting" id="GHI" name="GHI">
      <option value=""></option>
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
  </div>
  
  <div class="col-md-2">
    <label for="DEF" class="required control-label col-form-label">DEF</label>
  </div>
  <div class="col-md">
    <select class="form-control selecting" id="DEF" name="DEF">
      <option value=""></option>
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
  </div>
  
  <div class="col-md-2">
    <label for="ABC" class="required control-label col-form-label">ABC</label>
  </div>
  <div class="col-md">
    <select class="form-control selecting" id="ABC" name="ABC">
      <option value=""></option>
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
  </div>
  
</div>

标签的文本右对齐....更多更好的外观-示例如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<div class="row g-2 g-md-3 align-items-center">
  <div class="col-md-2 text-md-end">
    <label for="Nationality" class="required control-label col-form-label">Nationality</label>
  </div>
  <div class="col-md">
    <input type="text" class="form-control" name="Nationality" id="Nationality" >
  </div>
  
  <div class="w-100"></div> <!-- Force next columns to break to new line -->
  
  <div class="col-md-2 text-md-end">
    <label for="maritalStatus" class="required control-label col-form-label">maritalStatus</label>
  </div>
  <div class="col-md">
    <select class="form-control selecting" id="maritalStatus" name="maritalStatus">
      <option value=""></option>
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
  </div>
  
  <div class="col-md-2 text-md-end">
    <label for="education" class="required control-label col-form-label">Educaiton</label>
  </div>
  <div class="col-md">
    <select class="form-control selecting" id="education" name="education">
      <option value=""></option>
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
  </div>
  
  <div class="w-100"></div> <!-- Force next columns to break to new line -->
  
  <div class="col-md-2 text-md-end">
    <label for="GHI" class="required control-label col-form-label">GHI</label>
  </div>
  <div class="col-md">
    <select class="form-control selecting" id="GHI" name="GHI">
      <option value=""></option>
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
  </div>
  
  <div class="col-md-2 text-md-end">
    <label for="DEF" class="required control-label col-form-label">DEF</label>
  </div>
  <div class="col-md">
    <select class="form-control selecting" id="DEF" name="DEF">
      <option value=""></option>
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
  </div>
  
  <div class="col-md-2 text-md-end">
    <label for="ABC" class="required control-label col-form-label">ABC</label>
  </div>
  <div class="col-md">
    <select class="form-control selecting" id="ABC" name="ABC">
      <option value=""></option>
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
  </div>
  
</div>

赞(0）回复(0）举报 2023-04-01

我来回答

css 如何使用bootstrap 5垂直对齐不同行的输入？

2条答案

相关问题

热门标签

最新问答