Bootstrap 4 中 .flex-fill 的对立面是啥？

Posted 2023-03-07

【中文标题】Bootstrap 4 中 .flex-fill 的对立面是啥？

【英文标题】：What's the opposite of .flex-fill in Bootstrap 4?Bootstrap 4 中 .flex-fill 的对立面是什么？

【发布时间】：2018-09-29 05:45:10

【问题描述】：

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

我希望 flex 元素仅填充在小于 sm 的设备上（在示例中与我的列断点对齐）

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

但是没有flex-nofill这样的东西！

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

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

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

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

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

【参考方案1】：

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

见Grow and Shrink。

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

【参考方案2】：

如果使用 Bootstrap 5，可以使用 flex-fill 的响应断点。

“弹性填充也存在响应变化。

.flex-填充 .flex-sm-填充 .flex-md-填充 .flex-lg-填充 .flex-xl-填充 .flex-xxl-fill"

参考：https://getbootstrap.com/docs/5.0/utilities/flex/#fill

在你的情况下 .flex-md-fill 可以工作。

<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-md-fill"><i class="material-icons">file_download</i></button>
      <button class="btn btn-outline-secondary flex-md-fill"><i class="material-icons">filter_list</i></button>
    </div>
  </div>
</div>