Bootstrap 4 .flex-wrap类
在Bootstrap 4中使用flex-wrap类包装flex项。以下是包装flex项目的代码片段-
<div class="d-flex flex-wrap bg-primary"> . . <!-- flex items - - > . . </div>
让我们在flex-wrap类中设置一些flex项目-
<div class="d-flex flex-wrap bg-primary"> <div class="p-2 border">India</div> <div class="p-2 border">US</div> <div class="p-2 border">UK</div> <div class="p-2 border">Australia</div> <div class="p-2 border">Denmark</div> </div>
您可以尝试运行以下代码来实现flex-wrap类-
示例
<!DOCTYPE html> <html lang="en"> <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"> <h3>Flex Examples</h3> <p>Wrap - Yes</p> <div class="d-flex flex-wrap bg-primary"> <div class="p-2 border">India</div> <div class="p-2 border">US</div> <div class="p-2 border">UK</div> <div class="p-2 border">Australia</div> <div class="p-2 border">Denmark</div> <div class="p-2 border">India</div> <div class="p-2 border">Poland</div> <div class="p-2 border">Netherlands</div> <div class="p-2 border">Ireland</div> <div class="p-2 border">Brazil</div> <div class="p-2 border">Russia</div> <div class="p-2 border">Morocco</div> </div><br> <p>Wrap - No</p> <div class="d-flex flex-nowrap bg-primary"> <div class="p-2 border">India</div> <div class="p-2 border">US</div> <div class="p-2 border">UK</div> <div class="p-2 border">Australia</div> <div class="p-2 border">Denmark</div> <div class="p-2 border">India</div> <div class="p-2 border">Poland</div> <div class="p-2 border">Netherlands</div> <div class="p-2 border">Ireland</div> <div class="p-2 border">Brazil</div> <div class="p-2 border">Russia</div> <div class="p-2 border">Morocco</div> </div><br> </div> </body> </html>
-
通常，如果容器的空间不足，其余的弹性项目将被隐藏，如下所示。 flex-wrap属性用于指定flex-container是单行还是多行的控件。 usage - flex-wrap: nowrap | wrap | wrap-reverse flex-direction: column | column-reverse 此属性接受以下值 - wrap - 如果空间不足，容器的元素（flexitem
-
flex-wrap 主要通过在外层容器中设置它里面的子项目是否可以换行。默认情况下项目是不换行的。 1. 官方定义 flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。 2. 慕课解释 默认情况下，设置了 display:flex 的容器是不会换行的，这时候如果我们希望它换行就可以通过 flex-wrap设置超出宽度换行，也可以设置它如何换行，既换行之后的排
-
我有4个盒子，它是一个标准的2列2行盒子。不幸的是我必须提供ie支持。在internet explorer中，flex wrap不起作用，所以所有的框都在一排，看起来很乱。有没有一种可以替代柔性包装的方法呢？代码非常基本，在所有浏览器中都能工作，但在IE中不行。
-
问题内容： 我正在一个项目中，该项目具有使用flex wrap属性实现的响应式网格。由于我支持IE9和更低版本的Firefox（版本28及以下），因此如何通过javascript找出对Firefox的支持。目前，我只能通过条件语句来识别IE9浏览器，但是现在没有人可以通过JavaScript检测Firefox的较早版本。 问题答案： 我不知道您现在如何做，但是确实没有理由重新发明轮子。 为此创建了
-
我有一个带有两个子容器的flex-box容器，在屏幕较小的情况下，右边的容器应该折叠在左边的容器下面。然而，这似乎只在父容器宽度为100%时才起作用，而当它设置为固定宽度时则不起作用。它需要一个基于设计的固定宽度，我尝试将固定宽度的容器包装在具有100%宽度的父容器中，但这并不有效。 如何将容器设置为固定宽度，以便项目在较小屏幕尺寸下正确换行？ null null JSFIDDLE链接：链接
-
描述 (Description) wrap( html )方法使用指定的HTML内容包装每个匹配的元素。 此包装过程对于将其他结构注入文档非常有用，而不会破坏文档的原始语义质量。 语法 (Syntax) 以下是使用此方法的简单语法 - <i>selector</i>.wrap( html ) 参数 (Parameters) 以下是此方法使用的所有参数的说明 - elem - 将在动态创建并围绕每