css - 使用 Bootstrap .badge 的 IE11 Flexbox 问题

Question

目前，我有一个 flex-row，它有一个元素随着空间的增加而增长，还有一个徽章对齐到最后并且不应该增长。但是在带有 flex-grow: 0 的 IE11 中，span.badge 甚至不会占用其中内容的宽度。知道如何让 span.badge 成为其中内容的大小吗？

代码笔: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 做任何您想做的事情，您可以单独使用 native Bootstrap 4 类来做所有这些事情。

建议使用 native Bootstrap 4 类，因为当您这样做时，您无需担心 IE 11 兼容性(因为这已经完成并经过测试，这是首先使用 Bootstrap 的要点之一) .而不必要的 css hack 将需要更多的 css hack 来解决由原始 css hack 引起的问题。