Question

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

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

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

这样的东西

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

我觉得我在这里遗漏了一些明显的东西，但我怎么能只使用香草引导类来解决我的问题呢？

我知道创建这个新的-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>

小提琴（与宽度混淆以查看效果）：https://jsfiddle.net/xpvt214o/155315/

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

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

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

1 个答案: