html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<title>Bootstrap 实例</title>5
<meta charset="utf-8">6
<meta name="viewport" content="width=device-width, initial-scale=1">7
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">8
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>9
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>10
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>11
</head>12
<body>13
14
<div class="container mt-3">15
<h2>包裹</h2>16
<p>弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。</p>17
<p>.flex-nowrap 不包裹元素。</p>18
<p><code>.flex-nowrap:</code></p>19
<div class="d-flex flex-nowrap bg-light">20
<div class="p-2 border">Flex item 1</div>21
<div class="p-2 border">Flex item 2</div>22
<div class="p-2 border">Flex item 3</div>23
<div class="p-2 border">Flex item 4</div>24
<div class="p-2 border">Flex item 5</div>25
<div class="p-2 border">Flex item 6</div>26
<div class="p-2 border">Flex item 7</div>27
<div class="p-2 border">Flex item 8</div>28
<div class="p-2 border">Flex item 9</div>29
<div class="p-2 border">Flex item 10</div>30
<div class="p-2 border">Flex item 11</div>31
<div class="p-2 border">Flex item 12</div>32
<div class="p-2 border">Flex item 13 </div>33
<div class="p-2 border">Flex item 14</div>34
<div class="p-2 border">Flex item 15</div>35
<div class="p-2 border">Flex item 16</div>36
<div class="p-2 border">Flex item 17</div>37
<div class="p-2 border">Flex item 18</div>38
<div class="p-2 border">Flex item 19</div>39
<div class="p-2 border">Flex item 20</div>40
<div class="p-2 border">Flex item 21</div>41
<div class="p-2 border">Flex item 22</div>42
<div class="p-2 border">Flex item 23</div>43
<div class="p-2 border">Flex item 24</div>44
<div class="p-2 border">Flex item 25</div>45
</div>46
<br>47
48
<p><code>.flex-sm-nowrap:</code></p>49
<div class="d-flex flex-sm-nowrap bg-light">50
<div class="p-2 border">Flex item 1</div>51
<div class="p-2 border">Flex item 2</div>52
<div class="p-2 border">Flex item 3</div>53
<div class="p-2 border">Flex item 4</div>54
<div class="p-2 border">Flex item 5</div>55
<div class="p-2 border">Flex item 6</div>56
<div class="p-2 border">Flex item 7</div>57
<div class="p-2 border">Flex item 8</div>58
<div class="p-2 border">Flex item 9</div>59
<div class="p-2 border">Flex item 10</div>60
<div class="p-2 border">Flex item 11</div>61
<div class="p-2 border">Flex item 12</div>62
<div class="p-2 border">Flex item 13 </div>63
<div class="p-2 border">Flex item 14</div>64
<div class="p-2 border">Flex item 15</div>65
<div class="p-2 border">Flex item 16</div>66
<div class="p-2 border">Flex item 17</div>67
<div class="p-2 border">Flex item 18</div>68
<div class="p-2 border">Flex item 19</div>69
<div class="p-2 border">Flex item 20</div>70
<div class="p-2 border">Flex item 21</div>71
<div class="p-2 border">Flex item 22</div>72
<div class="p-2 border">Flex item 23</div>73
<div class="p-2 border">Flex item 24</div>74
<div class="p-2 border">Flex item 25</div>75
</div>76
<br>77
78
<p><code>.flex-md-nowrap:</code></p>79
<div class="d-flex flex-md-nowrap bg-light">80
<div class="p-2 border">Flex item 1</div>81
<div class="p-2 border">Flex item 2</div>82
<div class="p-2 border">Flex item 3</div>83
<div class="p-2 border">Flex item 4</div>84
<div class="p-2 border">Flex item 5</div>85
<div class="p-2 border">Flex item 6</div>86
<div class="p-2 border">Flex item 7</div>87
<div class="p-2 border">Flex item 8</div>88
<div class="p-2 border">Flex item 9</div>89
<div class="p-2 border">Flex item 10</div>90
<div class="p-2 border">Flex item 11</div>91
<div class="p-2 border">Flex item 12</div>92
<div class="p-2 border">Flex item 13 </div>93
<div class="p-2 border">Flex item 14</div>94
<div class="p-2 border">Flex item 15</div>95
<div class="p-2 border">Flex item 16</div>96
<div class="p-2 border">Flex item 17</div>97
<div class="p-2 border">Flex item 18</div>98
<div class="p-2 border">Flex item 19</div>99
<div class="p-2 border">Flex item 20</div>100
<div class="p-2 border">Flex item 21</div>101
<div class="p-2 border">Flex item 22</div>102
<div class="p-2 border">Flex item 23</div>103
<div class="p-2 border">Flex item 24</div>104
<div class="p-2 border">Flex item 25</div>105
</div>106
<br>107
108
<p><code>.flex-lg-nowrap:</code></p>109
<div class="d-flex flex-lg-nowrap bg-light">110
<div class="p-2 border">Flex item 1</div>111
<div class="p-2 border">Flex item 2</div>112
<div class="p-2 border">Flex item 3</div>113
<div class="p-2 border">Flex item 4</div>114
<div class="p-2 border">Flex item 5</div>115
<div class="p-2 border">Flex item 6</div>116
<div class="p-2 border">Flex item 7</div>117
<div class="p-2 border">Flex item 8</div>118
<div class="p-2 border">Flex item 9</div>119
<div class="p-2 border">Flex item 10</div>120
<div class="p-2 border">Flex item 11</div>121
<div class="p-2 border">Flex item 12</div>122
<div class="p-2 border">Flex item 13 </div>123
<div class="p-2 border">Flex item 14</div>124
<div class="p-2 border">Flex item 15</div>125
<div class="p-2 border">Flex item 16</div>126
<div class="p-2 border">Flex item 17</div>127
<div class="p-2 border">Flex item 18</div>128
<div class="p-2 border">Flex item 19</div>129
<div class="p-2 border">Flex item 20</div>130
<div class="p-2 border">Flex item 21</div>131
<div class="p-2 border">Flex item 22</div>132
<div class="p-2 border">Flex item 23</div>133
<div class="p-2 border">Flex item 24</div>134
<div class="p-2 border">Flex item 25</div>135
</div>136
<br>137
138
<p><code>.flex-xl-nowrap:</code></p>139
<div class="d-flex flex-xl-nowrap bg-light">140
<div class="p-2 border">Flex item 1</div>141
<div class="p-2 border">Flex item 2</div>142
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java