Почему переполнение карты от родительского col

Question

Элементы моей формы неправильно вписываются, а выравнивание искажено.

• .h-100 используется, так как синий фон - это моя навигация, и я хочу еечтобы заполнить всю высоту, доступную на экране.
• Я бы предпочел принять ответ, который может объяснить, почему мой фрагмент не работает.

Plunker здесь

HTML

  <div class="container-fluid h-100">
          <div class="row h-100">
            <div class="col-2  blue">
            </div>
            <div class="col-10">
             <div class="card h-100">
                <div class="card-body">
                  <form>
                    <div class="form-group">
                      <label for="Random">Random 1</label>
                      <input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">        
                    </div>
                    <div class="form-group">
                        <label for="Random">Random 2</label>
                        <input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">        
                      </div>
                      <div class="form-group">
                          <label for="Random">Random 3</label>
                          <input type="text" class="form-control" id="random3" placeholder="Enter Random">        
                        </div>
                      <div class="form-group">
                          <label for="Random">Random 4</label>
                          <input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">        
                        </div>
                    <div class="form-check">
                      <input type="checkbox" class="form-check-input" id="isActive">
                      <label class="form-check-label" for="isActive">Is Active</label>
                    </div>
                    <div class="form-group">
                        <label for="Random">Random 5</label>
                        <input type="text" class="form-control" id="random5" placeholder="Enter Random Random">        
                      </div>
                      <div class="form-group">
                          <label for="phoneNumber">Random 6</label>
                          <input type="number" class="form-control" id="random6" placeholder="Enter phone number">        
                        </div>
                        <div class="form-group">
                            <label for="emailId">Email</label>
                            <input type="number" class="form-control" id="emailId" placeholder="Enter email">        
                          </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </form>
                </div>
          </div>
            </div>
          </div>
        </div>

CSS

.blue {
    background-color:blue;
}

html,body {
    height: 100%;
  }

Снимок экрана

Answer 1

удалить класс .h-100 из .container и из .row, так как его высота должна быть автоматической, а не 100%, ответ, согласно тому, что я понимаю, что ваша карта выходит из вашей .col верно?если вы хотите придать синей форме, то вот код:

<div class="row">
        <div class="col-2  blue">
        </div>
        <div class="col-10">
         <div class="card h-100">
            <div class="card-body">
              <form>
                <div class="form-group">
                  <label for="Random">Random 1</label>
                  <input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">        
                </div>
                <div class="form-group">
                    <label for="Random">Random 2</label>
                    <input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">        
                  </div>
                  <div class="form-group">
                      <label for="Random">Random 3</label>
                      <input type="text" class="form-control" id="random3" placeholder="Enter Random">        
                    </div>
                  <div class="form-group">
                      <label for="Random">Random 4</label>
                      <input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">        
                    </div>
                <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="isActive">
                  <label class="form-check-label" for="isActive">Is Active</label>
                </div>
                <div class="form-group">
                    <label for="Random">Random 5</label>
                    <input type="text" class="form-control" id="random5" placeholder="Enter Random Random">        
                  </div>
                  <div class="form-group">
                      <label for="phoneNumber">Random 6</label>
                      <input type="number" class="form-control" id="random6" placeholder="Enter phone number">        
                    </div>
                    <div class="form-group">
                        <label for="emailId">Email</label>
                        <input type="number" class="form-control" id="emailId" placeholder="Enter email">        
                      </div>
                <button type="submit" class="btn btn-primary">Submit</button>
              </form>
            </div>
      </div>
        </div>
      </div>

.blue {min-height: 100px // высота, которую вы хотите придать}