Bootstrap 4自定义复选框缺少高度

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"> 包含所有子元素并具有完整高度？

这是一个在上下文中使用的代码笔：

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 有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  */

Updated codepen

堆栈sn-p

.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>

---

作为旁注，查看在这种情况下发生的事情的最佳方法之一是，例如在容器上添加边框，就像 here in the original codepen 所做的那样。使用它，大多数时候会很快发现问题，并立即了解问题所在，或者使用浏览器的 dev.tools 检查应用了哪些类/属性及其值。