Bootstrap 4 формирует встроенные элементы - выравнивает центры - PullRequest
Новая
       39

Bootstrap 4 формирует встроенные элементы - выравнивает центры

0 голосов
/ 11 февраля 2019

Каков наилучший способ выравнивания конца одного элемента встроенной формы и начала другого?В 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>
...