Bootstrap 4 中 .flex-fill 的反面是什么？

Question

遵循此处的文档：https : //getbootstrap.com/docs/4.1/utilities/flex/#fill

我想要一个 flex 元素只在小于 sm 的设备上填充（在示例中与我的列断点对齐）

所以，我会使用类似的东西 .flex-fill .flex-sm-nofill

但没有这样的事情flex-nofill！

我觉得我在这里遗漏了一些明显的东西，但是如何仅使用 vanilla bootstrap 类来解决我的问题？

我知道创建这个新-nofill类并不难，但我只是想知道是否已经有解决方案，我只是想不通。

代码示例，在这种情况下，我要填充的元素是 Buttons ：

<div class="row justify-content-between p-3">
  <div class="col-12 col-sm-8 col-xl-6 pb-2">
    <select class="custom-select" id="layer_select">
        <option data-dismiss="modal" value="0">Option1</option></select>
  </div>
  <div class="col-12 col-sm-3">
    <div class="d-flex justify-content-between justify-content-sm-end">
      <button class="btn btn-outline-secondary mr-2 flex-fill flex-sm-nofill"><i class="material-icons">file_download</i></button>
      <button class="btn btn-outline-secondary flex-fill flex-sm-nofill"><i class="material-icons">filter_list</i></button>
    </div>
  </div>
</div>

Fiddle（弄乱宽度看效果）：https : //jsfiddle.net/xpvt214o/155315/

我希望按钮在与选择并排时具有固定的宽度。

Answer 1

flex-fill套flex: 1 1 auto。
为了为sm断点更改此设置，您可以设置flex-sm-grow-0.
然后你会有flex: 0 1 auto.

请参阅增长和收缩。

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="row justify-content-between p-3">
  <div class="col-12 col-sm-8 col-xl-6 pb-2">
    <select class="custom-select" id="layer_select">
	    <option data-dismiss="modal" value="0">Option1</option></select>
  </div>
  <div class="col-12 col-sm-3">
    <div class="d-flex justify-content-between justify-content-sm-end">
      <button class="btn btn-outline-secondary mr-2 btn-icon flex-fill flex-sm-grow-0"><i class="material-icons">file_download</i></button>
      <button class="btn btn-outline-secondary btn-icon flex-fill flex-sm-grow-0"><i class="material-icons">filter_list</i></button>
    </div>
  </div>
</div>