2. it技术
  3. Day-15bootstrapFlex(弹性)布局、多媒体对象

Day-15bootstrapFlex(弹性)布局、多媒体对象

it2025-12-07  15

Flex（弹性）布局、多媒体对象

弹性盒子(flexbox)1. 基础弹性盒子2. 水平方向（.flex-row / .flex-row -reverse）3. 垂直方向（.flex-column / .flex-column-reverse）4. 内容排列（.justify-content-* ）5. 等宽（.flex-fill ）6. 扩展（.flex-grow-1 ）7. 排序（.order-1 到12）8. 外边距（.mr-auto / .ml-auto）9. 包裹（.flex-nowrap (默认) / .flex-wrap / .flex-wrap-reverse）10. 内容对齐（.align-content-*）11. 子元素对齐（.align-items-* ）12. 指定子元素对齐（.align-self-* ）13. 响应式 flex 类 多媒体对象1. 基础多媒体对象2. 多媒体对象嵌套3. 多媒体对象图片显示在右边4. 定位多媒体图片位置

弹性盒子(flexbox)

  Bootstrap4 通过 flex 类来控制页面的布局。

  Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。.弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计。

1. 基础弹性盒子

1.使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> </div> </body> </html>

运行结果： 2. 创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <div class="d-inline-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> </div> </body> </html>

运行结果：

2. 水平方向（.flex-row / .flex-row -reverse）

  .flex-row 可以设置弹性子元素水平显示，这是默认的。使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <div class="d-flex flex-row bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <br> <div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> </div> </body> </html>

运行结果：

3. 垂直方向（.flex-column / .flex-column-reverse）

  .flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <div class="d-flex flex-column mb-3"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <br> <div class="d-flex flex-column-reverse mb-3"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> </div> </body> </html>

运行结果：

4. 内容排列（.justify-content-* ）

  .justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <div class="d-flex justify-content-start bg-secondary mb-3"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex justify-content-end bg-secondary mb-3"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex justify-content-center bg-secondary mb-3"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex justify-content-between bg-secondary mb-3"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex justify-content-around bg-secondary mb-3"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> </div> </body> </html>

运行结果：

5. 等宽（.flex-fill ）

  .flex-fill 类强制设置各个弹性子元素的宽度是一样的。

代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="d-flex mb-3"> <div class="p-2 flex-fill bg-info">Flex item 1</div> <div class="p-2 flex-fill bg-warning">Flex item 2</div> <div class="p-2 flex-fill bg-primary">Flex item 3</div> </div> </body> </html>

运行结果：

6. 扩展（.flex-grow-1 ）

  .flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。

代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="d-flex mb-3"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 flex-grow-1 bg-primary">Flex item 3</div> </div> </body> </html>

运行结果： 提示: 使用 .flex-shrink-1 用于设置子元素的收缩规则。

7. 排序（.order-1 到12）

  .order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高。

代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="d-flex mb-3"> <div class="p-2 order-3 bg-info">Flex item 1</div> <div class="p-2 order-2 bg-warning">Flex item 2</div> <div class="p-2 order-1 bg-primary">Flex item 3</div> </div> </body> </html>

运行结果：

8. 外边距（.mr-auto / .ml-auto）

  .mr-auto 类可以设置子元素右外边距为 auto，.ml-auto 类可以设置子元素左外边距为 auto。

代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="d-flex mb-3 bg-secondary"> <div class="p-2 mr-auto bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex mb-3 bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 ml-auto bg-primary">Flex item 3</div> </div> </body> </html>

运行结果：

9. 包裹（.flex-nowrap (默认) / .flex-wrap / .flex-wrap-reverse）

  弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。

代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <p><code>.flex-wrap:</code></p> <div class="d-flex flex-wrap bg-light"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border">Flex item 2</div> <div class="p-2 border">Flex item 3</div> <div class="p-2 border">Flex item 4</div> <div class="p-2 border">Flex item 5</div> <div class="p-2 border">Flex item 6</div> <div class="p-2 border">Flex item 7</div> <div class="p-2 border">Flex item 8</div> <div class="p-2 border">Flex item 9</div> <div class="p-2 border">Flex item 10</div> <div class="p-2 border">Flex item 11</div> <div class="p-2 border">Flex item 12</div> <div class="p-2 border">Flex item 13 </div> <div class="p-2 border">Flex item 14</div> <div class="p-2 border">Flex item 15</div> <div class="p-2 border">Flex item 16</div> <div class="p-2 border">Flex item 17</div> <div class="p-2 border">Flex item 18</div> <div class="p-2 border">Flex item 19</div> <div class="p-2 border">Flex item 20</div> <div class="p-2 border">Flex item 21</div> <div class="p-2 border">Flex item 22</div> <div class="p-2 border">Flex item 23</div> <div class="p-2 border">Flex item 24</div> <div class="p-2 border">Flex item 25</div> </div> <br> <p><code>.flex-wrap-reverse:</code></p> <div class="d-flex flex-wrap-reverse bg-light"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border">Flex item 2</div> <div class="p-2 border">Flex item 3</div> <div class="p-2 border">Flex item 4</div> <div class="p-2 border">Flex item 5</div> <div class="p-2 border">Flex item 6</div> <div class="p-2 border">Flex item 7</div> <div class="p-2 border">Flex item 8</div> <div class="p-2 border">Flex item 9</div> <div class="p-2 border">Flex item 10</div> <div class="p-2 border">Flex item 11</div> <div class="p-2 border">Flex item 12</div> <div class="p-2 border">Flex item 13 </div> <div class="p-2 border">Flex item 14</div> <div class="p-2 border">Flex item 15</div> <div class="p-2 border">Flex item 16</div> <div class="p-2 border">Flex item 17</div> <div class="p-2 border">Flex item 18</div> <div class="p-2 border">Flex item 19</div> <div class="p-2 border">Flex item 20</div> <div class="p-2 border">Flex item 21</div> <div class="p-2 border">Flex item 22</div> <div class="p-2 border">Flex item 23</div> <div class="p-2 border">Flex item 24</div> <div class="p-2 border">Flex item 25</div> </div> <br> <p><code>.flex-nowrap:</code></p> <div class="d-flex flex-nowrap bg-light"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border">Flex item 2</div> <div class="p-2 border">Flex item 3</div> <div class="p-2 border">Flex item 4</div> <div class="p-2 border">Flex item 5</div> <div class="p-2 border">Flex item 6</div> <div class="p-2 border">Flex item 7</div> <div class="p-2 border">Flex item 8</div> <div class="p-2 border">Flex item 9</div> <div class="p-2 border">Flex item 10</div> <div class="p-2 border">Flex item 11</div> <div class="p-2 border">Flex item 12</div> <div class="p-2 border">Flex item 13 </div> <div class="p-2 border">Flex item 14</div> <div class="p-2 border">Flex item 15</div> <div class="p-2 border">Flex item 16</div> <div class="p-2 border">Flex item 17</div> <div class="p-2 border">Flex item 18</div> <div class="p-2 border">Flex item 19</div> <div class="p-2 border">Flex item 20</div> <div class="p-2 border">Flex item 21</div> <div class="p-2 border">Flex item 22</div> <div class="p-2 border">Flex item 23</div> <div class="p-2 border">Flex item 24</div> <div class="p-2 border">Flex item 25</div> </div> <br> </div> </body> </html>

运行结果：

10. 内容对齐（.align-content-*）

  我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。

  这些类在只有一行的弹性子元素中是无效的。

代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <p>.align-content-start (默认):</p> <div class="d-flex flex-wrap align-content-start bg-light" style="height:300px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border">Flex item 2</div> <div class="p-2 border">Flex item 3</div> <div class="p-2 border">Flex item 4</div> <div class="p-2 border">Flex item 5</div> <div class="p-2 border">Flex item 6</div> <div class="p-2 border">Flex item 7</div> <div class="p-2 border">Flex item 8</div> <div class="p-2 border">Flex item 9</div> <div class="p-2 border">Flex item 10</div> <div class="p-2 border">Flex item 11</div> <div class="p-2 border">Flex item 12</div> <div class="p-2 border">Flex item 13 </div> <div class="p-2 border">Flex item 14</div> <div class="p-2 border">Flex item 15</div> <div class="p-2 border">Flex item 16</div> <div class="p-2 border">Flex item 17</div> <div class="p-2 border">Flex item 18</div> <div class="p-2 border">Flex item 19</div> <div class="p-2 border">Flex item 20</div> <div class="p-2 border">Flex item 21</div> <div class="p-2 border">Flex item 22</div> <div class="p-2 border">Flex item 23</div> <div class="p-2 border">Flex item 24</div> <div class="p-2 border">Flex item 25</div> </div> <br> <p>.align-content-end:</p> <div class="d-flex flex-wrap align-content-end bg-light" style="height:300px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border">Flex item 2</div> <div class="p-2 border">Flex item 3</div> <div class="p-2 border">Flex item 4</div> <div class="p-2 border">Flex item 5</div> <div class="p-2 border">Flex item 6</div> <div class="p-2 border">Flex item 7</div> <div class="p-2 border">Flex item 8</div> <div class="p-2 border">Flex item 9</div> <div class="p-2 border">Flex item 10</div> <div class="p-2 border">Flex item 11</div> <div class="p-2 border">Flex item 12</div> <div class="p-2 border">Flex item 13 </div> <div class="p-2 border">Flex item 14</div> <div class="p-2 border">Flex item 15</div> <div class="p-2 border">Flex item 16</div> <div class="p-2 border">Flex item 17</div> <div class="p-2 border">Flex item 18</div> <div class="p-2 border">Flex item 19</div> <div class="p-2 border">Flex item 20</div> <div class="p-2 border">Flex item 21</div> <div class="p-2 border">Flex item 22</div> <div class="p-2 border">Flex item 23</div> <div class="p-2 border">Flex item 24</div> <div class="p-2 border">Flex item 25</div> </div> <br> <p>.align-content-center:</p> <div class="d-flex flex-wrap align-content-center bg-light" style="height:300px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border">Flex item 2</div> <div class="p-2 border">Flex item 3</div> <div class="p-2 border">Flex item 4</div> <div class="p-2 border">Flex item 5</div> <div class="p-2 border">Flex item 6</div> <div class="p-2 border">Flex item 7</div> <div class="p-2 border">Flex item 8</div> <div class="p-2 border">Flex item 9</div> <div class="p-2 border">Flex item 10</div> <div class="p-2 border">Flex item 11</div> <div class="p-2 border">Flex item 12</div> <div class="p-2 border">Flex item 13 </div> <div class="p-2 border">Flex item 14</div> <div class="p-2 border">Flex item 15</div> <div class="p-2 border">Flex item 16</div> <div class="p-2 border">Flex item 17</div> <div class="p-2 border">Flex item 18</div> <div class="p-2 border">Flex item 19</div> <div class="p-2 border">Flex item 20</div> <div class="p-2 border">Flex item 21</div> <div class="p-2 border">Flex item 22</div> <div class="p-2 border">Flex item 23</div> <div class="p-2 border">Flex item 24</div> <div class="p-2 border">Flex item 25</div> </div> <br> <p>.align-content-around:</p> <div class="d-flex flex-wrap align-content-around bg-light" style="height:300px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border">Flex item 2</div> <div class="p-2 border">Flex item 3</div> <div class="p-2 border">Flex item 4</div> <div class="p-2 border">Flex item 5</div> <div class="p-2 border">Flex item 6</div> <div class="p-2 border">Flex item 7</div> <div class="p-2 border">Flex item 8</div> <div class="p-2 border">Flex item 9</div> <div class="p-2 border">Flex item 10</div> <div class="p-2 border">Flex item 11</div> <div class="p-2 border">Flex item 12</div> <div class="p-2 border">Flex item 13 </div> <div class="p-2 border">Flex item 14</div> <div class="p-2 border">Flex item 15</div> <div class="p-2 border">Flex item 16</div> <div class="p-2 border">Flex item 17</div> <div class="p-2 border">Flex item 18</div> <div class="p-2 border">Flex item 19</div> <div class="p-2 border">Flex item 20</div> <div class="p-2 border">Flex item 21</div> <div class="p-2 border">Flex item 22</div> <div class="p-2 border">Flex item 23</div> <div class="p-2 border">Flex item 24</div> <div class="p-2 border">Flex item 25</div> </div> <br> <p>.align-content-stretch:</p> <div class="d-flex flex-wrap align-content-stretch bg-light" style="height:300px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border">Flex item 2</div> <div class="p-2 border">Flex item 3</div> <div class="p-2 border">Flex item 4</div> <div class="p-2 border">Flex item 5</div> <div class="p-2 border">Flex item 6</div> <div class="p-2 border">Flex item 7</div> <div class="p-2 border">Flex item 8</div> <div class="p-2 border">Flex item 9</div> <div class="p-2 border">Flex item 10</div> <div class="p-2 border">Flex item 11</div> <div class="p-2 border">Flex item 12</div> <div class="p-2 border">Flex item 13 </div> <div class="p-2 border">Flex item 14</div> <div class="p-2 border">Flex item 15</div> <div class="p-2 border">Flex item 16</div> <div class="p-2 border">Flex item 17</div> <div class="p-2 border">Flex item 18</div> <div class="p-2 border">Flex item 19</div> <div class="p-2 border">Flex item 20</div> <div class="p-2 border">Flex item 21</div> <div class="p-2 border">Flex item 22</div> <div class="p-2 border">Flex item 23</div> <div class="p-2 border">Flex item 24</div> <div class="p-2 border">Flex item 25</div> </div> <br> </div> </body> </html>

运行结果：

11. 子元素对齐（.align-items-* ）

  如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默认)。

代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <p>.align-items-start:</p> <div class="d-flex align-items-start bg-light" style="height:150px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border">Flex item 2</div> <div class="p-2 border">Flex item 3</div> </div> <br> <p>.align-items-end:</p> <div class="d-flex align-items-end bg-light" style="height:150px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border">Flex item 2</div> <div class="p-2 border">Flex item 3</div> </div> <br> <p>.align-items-center:</p> <div class="d-flex align-items-center bg-light" style="height:150px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border">Flex item 2</div> <div class="p-2 border">Flex item 3</div> </div> <br> <p>.align-items-baseline:</p> <div class="d-flex align-items-baseline bg-light" style="height:150px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border">Flex item 2</div> <div class="p-2 border">Flex item 3</div> </div> <br> <p>.align-items-stretch (默认):</p> <div class="d-flex align-items-stretch bg-light" style="height:150px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border">Flex item 2</div> <div class="p-2 border">Flex item 3</div> </div> <br> </div> </body> </html>

运行结果：

12. 指定子元素对齐（.align-self-* ）

  如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)。

代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <p>.align-self-start:</p> <div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border align-self-start">Flex item 2</div> <div class="p-2 border">Flex item 3</div> </div> <br> <p>.align-self-end:</p> <div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border align-self-end">Flex item 2</div> <div class="p-2 border">Flex item 3</div> </div> <br> <p>.align-self-center:</p> <div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border align-self-center">Flex item 2</div> <div class="p-2 border">Flex item 3</div> </div> <br> <p>.align-self-baseline:</p> <div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border align-self-baseline">Flex item 2</div> <div class="p-2 border">Flex item 3</div> </div> <br> <p>.align-self-stretch (默认):</p> <div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Flex item 1</div> <div class="p-2 border align-self-stretch">Flex item 2</div> <div class="p-2 border">Flex item 3</div> </div> <br> </div> </body> </html>

运行结果：

13. 响应式 flex 类

  我们可以根据不同的设备，设置 flex 类，从而实现页面响应式布局，以下表格中的 * 号可以的值有：sm, md, lg 或 xl, 对应的是小型设备、中型设备，大型设备，超大型设备。

多媒体对象

  Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等:

1. 基础多媒体对象

  要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <div class="media border p-3"> <img src="img/1.jpg" alt="aiQiYi" class="mr-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>爱奇艺</h4> <p>悦享品质</p> </div> </div> </div> </body> </html>

运行结果：

2. 多媒体对象嵌套

  多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）。要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <div class="media border p-3"> <img src="img/1.jpg" alt="aiQiYi" class="mr-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>爱奇艺</h4> <p>悦享品质</p> <div class="media p-3"> <img src="img/1.jpg" alt="aiQiYi" class="mr-3 rounded-circle" style="width:60px;"> <div class="media-body"> <h4>爱奇艺</h4> <p>悦享品质</p> </div> </div> </div> </div> </div> </body> </html>

运行结果：

3. 多媒体对象图片显示在右边

  如果你想将头像图片显示在右侧，可以在 .media-body 容器后添加图片。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <div class="media border p-3"> <div class="media-body"> <h4>爱奇艺</h4> <p>悦享品质</p> </div> <img src="img/1.jpg" alt="aiQiYi" class="mr-3 rounded-circle" style="width:60px;"> </div> </div> </body> </html>

运行结果：

4. 定位多媒体图片位置

  我们可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-3"> <!-- 头部 --> <div class="media"> <img src="img/1.jpg" class="align-self-start mr-3" style="width:60px"> <div class="media-body"> <h4>头部 -- 爱奇艺</h4> <p>悦享品质</p> <p>悦享品质</p> <p>悦享品质</p> </div> </div> <!-- 居中 --> <div class="media mt-3"> <img src="img/1.jpg" class="align-self-center mr-3" style="width:60px"> <div class="media-body"> <h4>居中 -- 爱奇艺</h4> <p>悦享品质</p> <p>悦享品质</p> <p>悦享品质</p> </div> </div> <!-- 底部 --> <div class="media mt-3"> <img src="img/1.jpg" class="align-self-end mr-3" style="width:60px"> <div class="media-body"> <h4>底部 -- 爱奇艺</h4> <p>悦享品质</p> <p>悦享品质</p> <p>悦享品质</p> </div> </div> </div> </body> </html>

运行结果：

最新回复(0)