Bootstrap 4 Custom Checkbox缺少高度

Question

我用BS4选中了一个带有自定义复选框的复选框。 但是元素溢出了容器.SamCheckbox 。 似乎有些元素没有被赋予全部高度，因此它中断了文档流。 就像您忘记清除浮点数一样-但这是通过flexbox而不是浮点数完成的。

如何避免这种情况并使复选框不超过高度？

<div class="SamCheckbox custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="sam-check-1" value="18">
  <i class="custom-control-indicator"></i>
</div>

我给它min-height以确保高度，但是我认为这不是必须的。

.SamCheckbox {
  min-height: 34px !important;

  &.custom-checkbox {
    .custom-control-input {
      display: none;

      & ~ .custom-control-indicator {
        background: none;
        border: 1px solid #333;
        color: blue;
        font-size: 1.6rem;
        width: 36px;
        height: 36px;

        &::before {
          position: absolute;
          top: 5px;
          left: 5px;
        }
      }

      &:checked ~ .custom-control-indicator {
        border: 1px solid #999;
        background: none;
      }

      &:disabled ~ .custom-control-indicator {
        border: none;
        background: none;
      }
    }
  }
}

如何确保<div class="SamCheckbox">包含所有子元素并具有完整高度？

这是一个在上下文中使用的codepen：

https://codepen.io/olefrankjensen/pen/RxXEBN?editors=1100

Answer 1

.custom-control-indicator溢出.SamCheckbox的原因是它的position: absolute ，并且这使它不再流通， .SamCheckbox不会占用其大小。

此外， .SamCheckbox padding-left: 1.5rem ， .custom-control-indicator padding-left: 1.5rem top: 0.25rem ，这进一步偏移了.custom-control-indicator 。

重置这些值将解决溢出并正确对齐。

.SamCheckbox {
  padding-left: 0;  /*  added  */

  &.custom-checkbox {
    .custom-control-input {
      display: none;

      & ~ .custom-control-indicator {
        background: none;
        border: 1px solid $color-grey-dark;
        color: $color-active;
        font-size: 1.6rem;
        width: 36px;
        height: 36px;
        position: relative;  /*  added  */
        top: 0;  /*  added  */

更新的代码笔

堆栈片段

 .ContractTemplateDetails { cursor: pointer; border: 1px solid #ccc; padding: 2rem !important; } .ContractTemplateDetails:hover { background-color: #e5e5e5; } .ContractTemplateDetails.checked { padding: 2rem; background-color: #ccc; -webkit-box-shadow: 0.25rem 0.25rem 0 0 #999; -moz-box-shadow: 0.25rem 0.25rem 0 0 #999; box-shadow: 0.25rem 0.25rem 0 0 #999; } .ContractTemplateDetails .contract-image img { width: 100%; } .ContractTemplateDetails .contract-image .image-placeholder { max-width: 25%; } .ContractTemplateDetails .contract-price h2 { font-family: Times serif; } .ContractTemplateDetails .contract-list, .ContractTemplateDetails .contract-list li { margin-left: 0; padding-left: 0; list-style-type: none; } .ContractTemplateDetails .contract-list li { text-align: left; color: #666; font-size: 0.8rem; } .ContractTemplateDetails .contract-list li:not(:first-child) { margin-top: 1rem; } .SamCheckbox { padding-left: 0; /* added */ } .SamCheckbox.custom-checkbox .custom-control-input { display: none; } .SamCheckbox.custom-checkbox .custom-control-input ~ .custom-control-indicator { background: none; border: 1px solid #666; color: blue; font-size: 1.6rem; width: 36px; height: 36px; position: relative; /* added */ top: 0; /* added */ } .SamCheckbox.custom-checkbox .custom-control-input ~ .custom-control-indicator::before { position: absolute; top: 5px; left: 5px; } .SamCheckbox.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator { border: 1px solid #666; background: none; } .SamCheckbox.custom-checkbox .custom-control-input:disabled ~ .custom-control-indicator { border: none; background: none; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat distinctio cupiditate debitis similique quod eligendi animi blanditiis rem. Neque libero nam facilis blanditiis consectetur pariatur veritatis esse consequatur vel sit.</div> <div class="col-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit, nostrum at a non quidem possimus explicabo saepe eum culpa quos laboriosam repudiandae corporis velit molestiae tempora natus ea tenetur quod.</div> </div> <div class="row"> <div class="col-sm-5 offset-sm-1"> <section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 card card-block h-100 justify-content-center align-items-center" data-template-id="18"> <div class="contract-image"><img class="" src="http://freevector.co/wp-content/uploads/2010/05/29358-toy-car-outline.png" alt="Contract Basic"></div> <h4 class="contract-title">Contract Basic</h4> <ul class="contract-list"> <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li> <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non.</li> <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li> <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non omfattet af serviceaftalen.</li> </ul> <div class="contract-price mt-auto"> <h2 class="component-margin-top-small">205,00 kr./md.</h2> </div> <div class="SamCheckbox custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="sam-check-undefined" value="18"><i class="custom-control-indicator"></i></div> </section> </div> <div class="col-sm-5"> <section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 checked card card-block h-100 justify-content-center align-items-center" data-template-id="18"> <div class="contract-image"><img class="" src="http://freevector.co/wp-content/uploads/2010/05/29358-toy-car-outline.png" alt="OmniCar Premium"></div> <h4 class="contract-title mt-md">Contract Premium</h4> <ul class="contract-list mb-md"> <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non .</li> <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non .</li> <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non mellem serviceeftersyn.</li> <li>Reparationer som er nødvendige for, at bilen fungerer drift Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non skulle ske at virke. Det kan jeg næsten ikke tro! mv. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li> </ul> <div class="contract-price mt-auto"> <h2 class="component-margin-top-small">540,00 kr./md.</h2> </div> <div class="SamCheckbox custom-control custom-checkbox mt-sm"><input type="checkbox" class="custom-control-input" id="sam-check-5" value="19"><i class="fa fa-check custom-control-indicator"></i></div> </section> </div> </div> </div> 

---

附带说明一下， 查看这种情况下发生的事情的最佳方法之一是，例如，在容器上添加边框，如原始codepen所示 。 通过这种方式，大部分时间会很快发现问题，并立即了解问题所在，或者使用浏览器的dev.tools检查应用了哪些类/属性及其值。