Question

目前，我有一个flex-row，其中一个元素随着空间的增长而增加，并且徽章会证明最终的结果并且不应该增长。但在使用flex-grow: 0的IE11中，span.badge甚至不会获取其中内容的宽度。知道如何让span.badge成为其中内容的大小吗？

Codepen：https://codepen.io/anon/pen/gvmwNY

#sector-form-wrapper {
  width: 500px;
  padding: 1rem;
}

.form-check-with-badge {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.2rem;
  line-height: 1.5rem;
  justify-content: space-between;
  align-items: center;
}

.form-check-with-badge .form-check {
  flex: 1;
}

.form-check-with-badge .form-check label {
  width: 100%;
}

.form-check-with-badge .badge {
  flex: 0;
}

.form-check-with-badge .badge {
  color: #fff;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css" rel="stylesheet" />

<div id="sector-form-wrapper" class="">
  <div class="form-check-with-badge">
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Apt">
              Apartment
            </label></div> <span class="badge badge-pill" style="background-color: rgb(0, 128, 128);">
            344
          </span></div>
  <div class="form-check-with-badge">
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Ret">
              Retail
            </label></div> <span class="badge badge-pill" style="background-color: rgb(159, 191, 127);">
            283
          </span></div>
  <div class="form-check-with-badge">
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Off">
              Office
            </label></div> <span class="badge badge-pill" style="background-color: rgb(127, 159, 191);">
            200
          </span></div>
  <div class="form-check-with-badge">
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Hot">
              Hotel
            </label></div> <span class="badge badge-pill">
            49
          </span></div>
  <div class="form-check-with-badge">
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Gen">
              Other
            </label></div> <span class="badge badge-pill">
            29
          </span></div>
  <div class="form-check-with-badge">
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Ind">
              Industrial
            </label></div> <span class="badge badge-pill" style="background-color: rgb(191, 159, 127);">
            22
          </span></div>
  <div class="form-check-with-badge">
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Spc">
              Specialty Properties
            </label></div> <span class="badge badge-pill">
            8
          </span></div>
  <div class="form-check-with-badge">
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Snr">
              Seniors Housing
            </label></div> <span class="badge badge-pill">
            6
          </span></div>
  <div class="form-check-with-badge">
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Aff">
              Affordable Housing
            </label></div> <span class="badge badge-pill">
            5
          </span></div>
  <div class="form-check-with-badge">
    <div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" value="Lnd">
              Land
            </label></div> <span class="badge badge-pill">
            5
          </span></div>
</div>

Answer 1

默认情况下，Bootstrap 4基于flexbox。并且可以轻松启用那些默认情况下未启用Flexbox的部分：https://getbootstrap.com/docs/4.0/utilities/flex/

这意味着：您可以执行自己尝试使用自定义css执行的所有操作，只需使用本机Bootstrap 4类即可完成所有操作。

建议使用本机Bootstrap 4类，因为当你这样做时，你不必担心IE 11的兼容性（因为已经完成并测试了这是第一个使用Bootstrap的要点之一）地点）。而不必要的css hacks将需要更多的css hacks来解决原始css hacks引起的问题。

使用Bootstrap .badge解决IE11 Flexbox问题

1 个答案: