css - 为什么card会从parent col溢出

Question

My Form elements are not fitting in correctly and the alignment is distorted.

• .h-100 已被使用，因为蓝色背景是我的导航，我希望它填充屏幕中可用的整个高度。
• 我更愿意接受可以解释为什么我的代码段不起作用的答案。

Plunker here

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

从 .container 和 .row 中删除 .h-100 类，因为它的高度应该是 auto 而不是 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>

.蓝色{ min-height: 100px//你要给的高度