为什么卡片会从父栏溢出

Question

  

我的表单元素无法正确放入并且对齐方式为   扭曲。

• .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类，因为它的高度应该是自动的而不是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 //您要指定的高度 }