单个flex项目的Bootstrap 4类占用可用空间

在Bootstrap 4中,如果您希望flex项目占用可用空间,请使用flex-grow- | 1类。

如果您希望第一个弹性项目占用空间,那么以下是代码-

<div class="d-flex mb-3">
  <div class="p-2 flex-grow-1  bg-warning">One</div>
  <div class="p-2 bg-secondary">Two</div>
  <div class="p-2 bg-danger">Three</div>
</div>

在上面可以看到,我在第一个div类中使用了flex-grow-1类-

<div class="p-2 flex-grow-1  bg-warning">
  One
</div>

以下是实现flex-grow-0 | 1类的示例-

示例

<!DOCTYPE html>
<html>
 <head>
   <title>Bootstrap Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
   <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
 </head>
<body>
<div class="container mt-3"
  <div class="d-flex mb-3">
    <div class="p-2 flex-grow-1  bg-warning">One</div>
    <div class="p-2 bg-secondary">Two</div>
    <div class="p-2 bg-danger">Three</div>
  </div>
</div>

</body>
</html>