Question

将一个内联表单元素的结尾与另一个内联表单元素的开头对齐的最佳方法是什么？在flex容器中，宽度值不能被定义所尊重，所以我不确定如何解决这个问题！

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

  <style>
    .col {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <div class="row">
    <div class="col-12">
      <form>
        <div class="form-inline input-group mb-2">
            <div class="input-group-prepend">
                <label class="input-group-text" for="TypeB">Type B</label>
            </div>
            <select class="custom-select" id="TypeB">
                <option value="Type B">Type B</option>
            </select>

            <div class="input-group-prepend">
                <label class="input-group-text" for="TypeBDetail">Type B detail</label>
            </div>
            <input id="TypeBDetail" type="text" class="form-control" >
        </div>


        <div class="form-inline input-group mb-2">
            <div class="input-group-prepend">
                <label class="input-group-text" for="Number1">Number1 title is here          </label>
            </div>
            <input id="Number1" type="text" class="form-control" >

            <div class="input-group-prepend">
                <label class="input-group-text" for="number"> number</label>
            </div>
            <input type="text" id="number" class="form-control" >

        </div>

        <div class="form-inline input-group mb-2">
            <div class="input-group-prepend">
                <label class="input-group-text" for="textarea1">Textarea1</label>
            </div>
            <textarea class="form-control" id="textarea1" rows="4" ></textarea>

            <div class="input-group-prepend">
                <label class="input-group-text" for="textarea2">Text<br/>area2</label>
            </div>
            <textarea class="form-control" id="textarea2" rows="4" ></textarea>
        </div>

      </form>
     </div>
    </div>
</body>

</html>

Bootstrap 4表单内联元素-对齐中心

0 个答案: