Question

flex-grow-1是否可以使用从w3school sample复制的引导程序4.1.3

<head>
  <!-- flex-grow-1 is working with these libraries -->
  <!------------------------------------------------->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container mt-3">
    <div class="d-flex mb-3">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 flex-grow-1 bg-primary">Flex item 2</div>
    </div>
  </div>
</body>

但是，如果我使用Bootstrap 4 official page中提供的bootstrap 4.0.0 CDN，那么flex-grow-1类将不起作用-似乎该类不存在：

<head>
  <!-- flex-grow-1 is not working with these libraries -->
  <!----------------------------------------------------->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container mt-3">
    <div class="d-flex mb-3">
      <div class="p-2 bg-info">Flex item 1</div>
      <div class="p-2 flex-grow-1 bg-primary">Flex item 2</div>
    </div>
  </div>
</body>

问题：

这是一个错误吗？还是我做错了？
我不愿意使用Bootstrap版本4.1.3 CDN的原因是它们没有integrity和crossorigin安全字段。版本4.1.3是否有包含这些安全性字段的CDN？

Answer 1

这不是错误。您可以see here .flex-fill，.flex-grow-*和.flex-shrink-*实用程序直到 Bootstrap 4.1 才添加。

相关：
Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow
Bootstrap 4 - Sticky footer - Dynamic footer height

Answer 2

CDN位于Bootstrap 4.1 page上。

flex-grow-1在某些版本的引导程序中不起作用

问题：

2 个答案: