为什么卡从父col溢出

Question

我的表单元素没有正确适配，对齐方式是 变形。

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

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 //你要给的高度 }