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

Stack snippet

.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检查应用了哪些类/属性及其值。

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

1 个答案: