Bootstrap 滚动监听+小工具+Flex（弹性）布局+多媒体对象-范文大全|优秀作文-实用文体写作网

demo1</title"/> <meta property="og:author" content=""/> <meta property="og:bbs:replay" content=""/> <meta name="author" content="范文大全|优秀作文-实用文体写作网" /> <link rel="canonical" href="https://www.wtabcd.cn/fanwen/zuowen/de6a479981b57c3cf39329aaa3310d72.html"/> <div class="container"> <div class="row">  <div class="col-md-12 col-xs-12"> <div class="tab_title"> <i class="iconfont icon-dizhi"></i> <a href="https://www.wtabcd.cn/fanwen/">首页</a> > <a href="https://www.wtabcd.cn/fanwen/list/92_0.html">作文</a></div> </div> <div class="col-md-9 col-xs-12"> <section class="thjingxuan_sec th_top"> <h1 class="detail-title">Bootstrap 滚动监听+小工具+Flex（弹性）布局+多媒体对象</h1> <div class="detail-icon"> <p class="meta"> <span>更新时间:2023-04-03 18:26:05</span> <span>阅读：<script src=https://www.wtabcd.cn/fanwen/e/public/ViewClick/?classid=92&id=451316&addclick=1></script></span> <span>评论：0</span></p> </div>  <div class="th_ad3 th_top"> <div class="pcd_ad"><script src="https://www.wtabcd.cn/fanwen/d/js/acmsd/thea20.js"></script></div> <div class="mbd_ad"></div> </div> <div class="detail-con"> <p>bootstrap 滚动监听</p><pre><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> body{ margin:10px; padding:10px; } .navbar-item{flex:1;} </style></head><body data-spy="scroll" data-target=".navbar" data-offt="50" style="position: relative;"> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> <ul class="navbar-nav" style="width:100%;"> <li class="nav-item"> <a href="#item1" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#item2" class="nav-link">item2</a> </li> <li class="nav-item"> <a href="#item3" class="nav-link">item3</a> </li> <li class="nav-item"> <a href="#item4" class="nav-link">item4</a> </li> </ul> </nav> <div id="item1" class="container-fluid bg-success" style="padding:70px 0"> <h1>ction 1</h1> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> </div> <div id="item2" class="container-fluid bg-warning" style="padding:70px 0"> <h1>ction 2</h1> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> </div> <div id="item3" class="container-fluid bg-danger" style="padding:70px 0"> <h1>ction 3</h1> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> </div> <div id="item4" class="container-fluid bg-info" style="padding:70px 0"> <h1>ction 4</h1> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> </div></body></html></pre></p><p></p><p></p><p></p><p>把滚动监听加在body标签上，是正常的</p><p>当我尝试加在某个div上时，发现滚动监听似乎无效了</p><p>各位有知道原因的么</p><pre><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> body{ margin:10px; padding:10px; } .navbar-item{flex:1;} </style></head><body><div data-spy="scroll" data-target=".navbar" data-offt="50" style="width:300px;margin:0 auto;position: relative;"> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" style="width:300px;margin:0 auto;"> <ul class="navbar-nav" style="width:100%;"> <li class="nav-item"> <a href="#item1" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#item2" class="nav-link">item2</a> </li> <li class="nav-item"> <a href="#item3" class="nav-link">item3</a> </li> <li class="nav-item"> <a href="#item4" class="nav-link">item4</a> </li> </ul> </nav> <div id="item1" class="container-fluid bg-success" style="padding:70px 0"> <h1>ction 1</h1> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> </div> <div id="item2" class="container-fluid bg-warning" style="padding:70px 0"> <h1>ction 2</h1> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> </div> <div id="item3" class="container-fluid bg-danger" style="padding:70px 0"> <h1>ction 3</h1> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> </div> <div id="item4" class="container-fluid bg-info" style="padding:70px 0"> <h1>ction 4</h1> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> </div></div></body></html></pre></p><p></p><p></p><p></p><p>垂直滚动监听：</p><pre><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .nav-pills{ position:fixed; top:20px; } .col-8 div{ height:800px; } </style></head><body data-spy="scroll" data-target="#navbar" data-offt="1" style="position: relative;"> <div class="container-fluid"> <div class="row"> <nav class="col-4" id="navbar"> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a href="#item1" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#item2" class="nav-link">item2</a> </li> <li class="nav-item"> <a href="#item3" class="nav-link">item3</a> </li> <li class="nav-item"> <a href="#item4" class="nav-link">item4</a> </li> </ul> </nav> <div class="col-8"> <div id="item1" class="container-fluid bg-success" style="padding:70px 0"> <h1>ction 1</h1> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> </div> <div id="item2" class="container-fluid bg-warning" style="padding:70px 0"> <h1>ction 2</h1> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> </div> <div id="item3" class="container-fluid bg-danger" style="padding:70px 0"> <h1>ction 3</h1> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> </div> <div id="item4" class="container-fluid bg-info" style="padding:70px 0"> <h1>ction党的光辉历程心得体会 4</h1> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> <p>try to scroll this ction and look at the navigation bar while scrolling! try to scroll this ction and look at the navigation bar while scrolling!</p> </div> </div> </div> </div></body></html></pre></p><p></p><p></p><p></p><p></p><p>bootstrap4 小工具</p><p>使用<span>border类可以添加或移除边框:</span></p><pre><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> div{ display: inline-block; width:100px; height:100px; margin:20px; } </style></head><body> <div class="border"></div> <div class="border-0"></div> <div class="border border-top-0"></div> <div class="border border-right-0"></div> <div class="border border-bottom-0"></div> <div class="border border-left-0"></div></body></html></pre></p><p></p><p></p><p></p><p>bootstrap4 提供了一些类来设置边框颜色:</p><pre><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> div{ display: inline-block; width:100px; height:100px; margin:20px; } </style></head><body> <div class="border border-primary">primary</div> <div class="border border-condary">condary</div> <div class="border border-info">info</div> <div class="border border-warning">warning</div> <div class="border border-danger">danger</div> <div class="border border-success">success</div> <div class="border border-light">light</div> <div class="border border-dark">dark</div> <div class="border border-white">white</div></body></html></pre></p><p></p><p></p><p></p><p>使用<span>rounded类可以添加圆角边框:</span></p><pre><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> div{ display: inline-block; width:100px; height:100px; margin:20px; } </style></head><body> <div class="rounded border">rounded</div> <div class="rounded-top border">rounded-top</div> <div class="rounded-bottom border">rounded-bottom</div> <div class="rounded-left border">rounded-left</div> <div class="rounded-right border">rounded-right</div> <div class="rounded-circle border">rounded-circle</div> <div class="rouded-0 border">rouded-0</div></body></html></pre></p><p></p><p></p><p></p><p><span>.float-right类用于设置元素右浮动，<span>.float-left设置元素左浮动,<span>.clearfix类用于清除浮动:</span></span></span></p><pre><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .box{ width:100px; height:100px; } </style></head><body> <div class="clearfix"> <div class="box border float-left">float-left</div> <div class="box border float-right">float-right</div> </div></body></html></pre></p><p></p><p></p><p>设置浮动 (<span>.float-*-left|right– * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:</span></p><pre><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .box{ 孟子的著作 width:100px; height:100px; } </style></head><body>  <div class="clearfix"> <div class="box border float-md-right">在大于中等屏幕尺寸上右浮动</div> </div></body></html></pre><p></p><p>使用<span>.mx-auto类来设置居中对齐:</span></p><pre><div class="box mx-auto bg-warning">div</div></pre></p><p></p><p></p><p></p><p>使用 w-* 类 (<span>.w-25,<span>.w-50,<span>.w-75,<span>.w-100,<span>.mw-100) 来设置宽度:</span></span></span></span></span></p><pre><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> div{ margin-bottom:10px; } </style></head><body> <div class="w-25 bg-warning">25%</div> <div class="w-50 bg-warning">50%</div> <div class="w-100 bg-warning">100%</div> <div class="mw-80 bg-warning">最大80%</div></body></html></pre><p>最大宽度没生效，是这么用的么？？</p><p></p><p>使用 h-* 类 (<span>.h-25,<span>.h-50,<span>.h-75,<span>.h-100,<span>.mh-100) 来设置高度:</span></span></span></span></span></p><pre><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/b腊八蒜用什么醋比较好ootstrap.min.js"></script> <style> .container{ height:300px; } div{ margin-right:10px; } </style></head><body> <div class="container"> <div class="float-left h-25 bg-warning">25%</div> <div class="float-left h-50 bg-warning">50%</div> <div class="float-left h-100 bg-warning">100%</div> <div class="float-left mh-80 bg-warning" style="height:300px;">最大80%</div> </div></body></html></pre></p><p></p><p></p><p></p><p>不是很懂这个最大宽度和最大高度的原理……</p><p></p><p>bootstrap 4 flex（弹性）布局</p><p>注意：ie9 及其以下版本不支持弹性盒子，所以如果你需要兼容 ie8-9，请使用 bootstrap 3</p><pre> <div class="d-flex p-3 bg-dark"> <div class="p-2 bg-warning">bg-warning</div> <div class="p-2 bg-info">bg-info</div> <div class="p-2 bg-danger">bg-danger</div> </div></pre></p><p></p><p></p><p></p><p>创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类:</p><pre> <div class="d-inline-flex p-3 bg-dark"> <div class="p-2 bg-warning">bg-warning</div> <div class="p-2 bg-info">bg-info</div> <div class="p-2 bg-danger">bg-danger</div> </div></pre></p><p></p><p></p><p></p><p><span>.flex-row可以设置弹性子元素水平显示，这是默认的。</span></p><p>使用<span>.flex-row-rever类用于设置右对齐显示，即与<span>.flex-row方向相反。</span></span></p><pre> <div class="d-flex p-3 bg-dark"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark flex-row"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark flex-row-rever"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div></pre></p><p></p><p></p><p></p><p></p><p><span>.flex-column类用于设置弹性子元素垂直方向显示,<span>.flex-column-rever用于翻转子元素：</span></span></p><pre> <div class="d-flex p-3 bg-dark flex-column"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark flex-column-rever"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div></pre></p><p></p><p></p><p></p><p><span>.justify-content-*类用于修改弹性子元素的排列方式，<span>*号允许的值有：<strong>start (默认), end, center, between 或 around</strong>:</span></span></p><pre> <div class="d-flex p-3 bg-dark justify-content-start"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark justify-content-end"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark justify-content-center"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark justify-content-between"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark justify-content-around"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div></pre></p><p></p><p></p><p></p><p>.flex-fill 类强制设置各个弹性子元素的宽度是一样的:（填满剩余空间）</p><pre> <div class="d-flex p-3 bg-dark"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark"> <div class="p-2 bg-warning flex-fill">flex box1</div> <div class="p-2 bg-info flex-fill">flex box2</div> <div class="p-2 bg-danger flex-fill">flex box3</div> </div></pre></p><p></p><p></p><p></p><p>.flex-grow-1 用于设置子元素使用剩下的空间。以下实例中两个子元素只设置了它们所需要的空间，中间一个获取剩余空间。</p><pre> <div class="d-flex p-3 bg-dark"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info flex-grow-1">flex box2</div> <div class="p-2 bg-danger">flex box3</div> </div></pre></p><p></p><p></p><p></p><p>使用<span>.flex-shrink-1用于设置子元素的收缩规则。</span></p><p></p><p><span><span>.order类可以设置弹性子元素的排序，从<span>.order-1到<span>.order-12，数字越低权重越高(<span>.order-1排在<span>.order-2之前) :</span></span></span></span></span></span></p><pre> <div class="d-flex p-3 bg-dark"> <div class="p-2 bg-warning order-2">flex box1</div> <div class="p-2 bg-info order-3">flex box2</div> <div class="p-2 bg-danger order-1">flex box3</div> </div></pre></p><p></p><p></p><p><span>.mr-auto类可以设置子元素右外边距为<strong>auto</strong>，即<span>margin-right: auto!important;，<span>.ml-auto类可以设置子元素左外边距为<strong>auto</strong>，即<span>margin-left: auto!important;:</span></span></span></span></p><pre> <div class="d-flex p-3 bg-dark"> <div class="p-2 mr-auto bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 ml-auto bg-danger">flex box3</div> </div></pre></p><p></p><p></p><p>弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-rever。设置 flex 容器是单行或者多行</p><pre> <div class="d-flex p-3 bg-dark flex-wrap"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark flex-wrap-rever"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark flex-nowrap"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div></pre></p><p></p><p></p><p>使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。</p><p>这些类在只有一行的弹性子元素中是无效的</p><pre><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .d-flex{height:200px;} </style></head><body> <div class="d-flex p-3 bg-dark flex-wrap align-content-start border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark flex-wrap align-content-end border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark flex-wrap align-content-center border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark flex-wrap align-content-around border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark flex-wrap align-content-stretch border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div></body></html></pre></p><p></p><p></p><p></p><p><span>如果要设置单行的子元素对齐可以使用<span>.align-items-*类来控制，包含的值有：<strong>.align-items-start, .align-items-end, .align-items-center, .align-items-baline, 和 .align-items-stretch (默认)</strong>。</span></span></p><pre> <div class="d-flex p-3 bg-dark align-items-start border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark align-items-end border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark align-items-center border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark align-items-around border border-white"> <div class="p-2 bg-warning">flex box1</div> <div c非零自然数是什么lass="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark align-items-stretch border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> 签名吧 </div></pre></p><p></p><p></p><p>如果要设置指定子元素对齐对齐可以使用 .align-lf-* 类来控制，包含的值有：.align-lf-start, .align-lf-end, .align-lf-center, .align-lf-baline, 和 .align-lf-stretch (默认)。</p><pre> <div class="d-flex p-3 bg-dark border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger align-lf-start">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger align-lf-end">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger align-lf-center">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger align-lf-around">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger align-lf-stretch">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div></pre></p><p></p><p></p><p>响应式flex类：</p><p>可以根据不同的设备，设置 flex 类，从而实现页面响应式布局，以下表格中的 * 号可以的值有：sm, md, lg 或 xl, 对应的是小型设备、中型设备，大型设备，超大型设备。</p><p> 菜鸟笔记最下面写的很清楚，要用了就去翻翻</p><p></p><p>bootstrap 4 多媒体对象</p><p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果:</p><pre> <div class="media border p-3"> <img src="img/img_avatar.png" class="mr-3 mt-3 rounded-circle" style="width:50px;"> <div class="media-body"> <h4>基础多媒体对象</h4> <p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。</p> </div> </div></pre></p><p></p><p></p><p>多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）</p><p>要嵌套多媒体对象，可以把新的<span>.media容器放到<span>.media-body容器中:</span></span></p><pre> <div class="media border p-3"> <img src="img/img_avatar.png" class="mr-3 mt-3 rounded-circle" style="width:50px;"> <div class="media-body"> <h4>基础多媒体对象</h4> <p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。</p> <div class="media border p-3"> <img src="img/img_avatar.png" class="mr-3 mt-3 rounded-circle" style="width:50px;"> <div class="media-body"> <h4>基础多媒体对象</h4> <p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。</p> </div> </div> </div> </div></pre></p><p></p><p></p><p>如果你想将头像图片显示在右侧，可以在<span>.media-body容器后添加图片:</span></p><pre> <div class="media border p-3"> <div class="media-body"> <h4>基础多媒体对象</h4> <p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。</p> </div> <img src="img/img_avatar.png" class="mr-3 mt-3 rounded-circle" style="width:50px;"> </div></pre></p><p></p><p></p><p></p><p></p><p>可以使用 align-lf-* 相关类来设置多媒体对象的图片显示位置：</p><p>（垂直方向）</p><pre> <div class="media border p-3"> <img src="img/img_avatar.png" class="align-lf-start mr-3 rounded-circle" style="width:50px;"> <div class="media-body"> <h4>基础多媒体对象</h4> <p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。</p> </div> </div> <div class="media border p-3"> <img src="img/img_avatar.png" class="align-lf-end mr-3 rounded-circle" style="width:50px;"> <div class="media-body"> <h4>基础多媒体对象</h4> <p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。</p> </div> </div> <div class="media border p-3"> <img src="img/img_avatar.png" class="align-lf-center mr-3 rounded-circle" style="width:50px;"> <div class="media-body"> <h4>基础多媒体对象</h4> <p>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。</p> </div> </div></pre></p><p></p><p></p><p>bootstrap4 创建一个网页</p><pre><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> </style></head><body> <div class="jumbotron text-center" style="margin-bottom:0;"> <h1>我的第一个 bootstrap 4 页面</h1> <p>重置浏览器窗口大小查看效果！</p> </div> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">导航</a> <button class="navbar-toggler" type="button" data-toggle="collap" data-target="#collapsiblenavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collap navbar-collap" id="collapsiblenavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">链接</a> </li> <li class="nav-item"> <a class="nav-link" href="#">链接</a> </li> <li class="nav-item"> <a class="nav-link" href="#">链接</a> </li> </ul> </div> </nav> <div class="container"> <div class="row"> <div class="col-sm-4"> about me <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">激活状态</a> </li> <li class="nav-item"> <a class="nav-link" href="#">链接</a> </li> <li class="nav-item"> <a class="nav-link" href="#">链接</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">禁用</a> </li> </ul> <hr class="d-sm-none"> </div> <div class="col-sm-8"> ... </div> </div> </div> <div class="jumbotron text-center" style="margin-bottom:0"> <p>footer</p> </div></body></html></pre></p><p></p><p>好丑……</p><p></p> </div>  <div class="th_page th_page_color4 th_top"> </div>  <div class="th_ad3 th_top"> <div class="pcd_ad"><script src="https://www.wtabcd.cn/fanwen/d/js/acmsd/thea22.js"></script></div> <div class="mbd_ad"></div> </div> <div class="umCopyright"> <p>本文发布于:2023-04-03 18:26:00，感谢您对本站的认可！</p> <p>本文链接：<a href="https://www.wtabcd.cn/fanwen/zuowen/de6a479981b57c3cf39329aaa3310d72.html" target="_blank" style="color:#999">https://www.wtabcd.cn/fanwen/zuowen/de6a479981b57c3cf39329aaa3310d72.html</a></p> <p>版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</p> </div> <p>本文word下载地址：<a href="https://www.wtabcd.cn/fanwen/e/dongpo/doc/?classid=92&id=451316" target="_blank">Bootstrap 滚动监听+小工具+Flex（弹性）布局+多媒体对象.doc</a></p> <p>本文 PDF 下载地址：<a href="https://www.wtabcd.cn/fanwen/e/dongpo/doc/pdf/?classid=92&id=451316" target="_blank">Bootstrap 滚动监听+小工具+Flex（弹性）布局+多媒体对象.pdf</a> <br /> </p>  <div class="detail-arr"> <div class="detail-arr-left">上一篇：<a href='https://www.wtabcd.cn/fanwen/zuowen/3e9a28c0155c175a37fc43e6c115220b.html'>钻展和直通车的区别（直通车是什么意思）</a></div> <div class="detail-arr-right">下一篇：<a href='https://www.wtabcd.cn/fanwen/list/92_0.html'>返回列表</a></div> </div>  <div class="detail-tags"> <i class="iconfont icon-x-tags"></i> 标签：<a href="https://www.wtabcd.cn/fanwen/tags/%E5%AE%B9%E5%99%A8_0.html" target="_blank">容器</a> <a href="https://www.wtabcd.cn/fanwen/tags/%E5%A4%9A%E5%AA%92%E4%BD%93_0.html" target="_blank">多媒体</a> <a href="https://www.wtabcd.cn/fanwen/tags/%E5%85%83%E7%B4%A0_0.html" target="_blank">元素</a> <a href="https://www.wtabcd.cn/fanwen/tags/%E5%AF%B9%E8%B1%A1_0.html" target="_blank">对象</a></div> </section> <div class="thleftcon th_top"> <div class="thleftbt thwenzhang thsec4"> <span class="th_cl4">相关文章</span> </div> <ul class="th-5"> </ul> </div>  <a name="comments" id="comments"></a> <div class="showpage" id="plpost"> <link href="https://www.wtabcd.cn/fanwen/skin/ecmspl/css/pl.css" rel="stylesheet"> <div class="showpage" id="plpost"> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;"> <tr><td><strong><font color="#333333">留言与评论（共有 <span id="infocommentnumarea">0</span> 条评论）</font></strong></td></tr> </table> <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗？"); obj.saytext.focus(); return false; } return true; } </script> <form action="https://www.wtabcd.cn/fanwen/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td> <script src="https://www.wtabcd.cn/fanwen/e/pl/loginjspl.php"></script> <textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定，不要发布广告和违法内容!"></textarea> <script src="https://www.wtabcd.cn/fanwen/d/js/js/plface.js"></script> <table width='100%' align='left' cellpadding=3 cellspacing=1 bgcolor='#FFF'> <tr> <td width="80%" height="40" bgcolor="#FFFFFF">验证码：<input name="key" type="text" class="inputText" size="16" /> <img src="https://www.wtabcd.cn/fanwen/e/ShowKey/?v=pl" align="absmiddle" name="plKeyImg" id="plKeyImg" onclick="plKeyImg.src='https://www.wtabcd.cn/fanwen/e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新" /> </td> <td width="20%" height="40" bgcolor="#FFFFFF"> <input name="sumbit" type="submit" value="提交评论" tabindex="6" style="border-radius: 5px;font-size: 16px;background: #e94c3d none repeat scroll 0% 0%;border: 0px none;margin: 0px 16px;padding: 1px 16px;height: 33px;line-height: 30px;color: rgb(255, 255, 255);opacity: 0.95;"> <input name="id" type="hidden" id="id" value="451316" /> <input name="classid" type="hidden" id="classid" value="92" /> <input name="enews" type="hidden" id="enews" value="AddPl" /> <input name="repid" type="hidden" id="repid" value="0" /> <input type="hidden" name="ecmsfrom" value="https://www.wtabcd.cn/fanwen/zuowen/de6a479981b57c3cf39329aaa3310d72.html"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table></form> <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> <tr> <td bgcolor="#FFFFFF" id="infocommentarea"></td> </tr> </table> <script src="https://www.wtabcd.cn/fanwen/e/extend/infocomment/commentajax.php?classid=92&id=451316"></script> </div> </div> </div>  <div class="col-md-3 col-xs-12">  <div class="thleftcon wap_top th_top"> <div class="thleftbt thwenzhang thsec4"><span class="th_cl4">推荐文章</span></div> <ul class="th-5" style="padding-top:0px"> </ul> </div>  <div class="th_ad3 th_top"> <div> <script src='https://www.wtabcd.cn/fanwen/d/js/acmsd/thea15.js'></script> </div> </div>  <div class="thleftcon th_top"> <div class="thleftbt thwenzhang thsec4"><span class="th_cl4">排行榜</span></div> <ul class="th-5"> <li class="th_li"> <div class="bottom1 gundongimg"> <a href="https://www.wtabcd.cn/fanwen/zuowen/de6a479981b57c3cf39329aaa3310d72.html" title="Bootstrap 滚动监听+小工具+Flex（弹性）布局+多媒体对象"><img class="th_img banner_bottom" style="height:90px" src="/d/file/2023-02-27/89b893097424747d6f133333c8b8972c.jpg" /></a> </div> <div class="bottom2 gundongimg"> <a class="th_hover_a4" href="https://www.wtabcd.cn/fanwen/zuowen/de6a479981b57c3cf39329aaa3310d72.html" title="Bootstrap 滚动监听+小工具+Flex（弹性）布局+多媒体对象" target="_blank">Bootstrap 滚动监听+小工具+Flex（弹性）布局+多媒体对象</a> <div class="bottom2_info"> bootstrap 滚动监听<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>demo1

0℃钻展和直通车的区别（直通车是什么意思）

0℃阿卡索宣布获c2轮融资，将全力打造一流师资队伍

0℃专业择日软件官方，最精确的择日软件是哪个，给推荐一下。

0℃八字相克的婚姻怎么化解，求八字相克的化解办法

0℃王者荣耀哪个adc适合上分最值得苦练的adc

0℃HTML连载84

0℃公司取名字大全免费查询，免费公司起名字大全怎样看？

0℃孕妇乘坐公交地铁要避开什么？

0℃ipadpro2021对比ipadair4哪个值得买

热门标签