问题描述
限时送ChatGPT账号..我有一个嵌套的 flexbox 布局(使用 bootstrap v4),它根据横向/纵向模式改变方向.第一层 div
(由 flexbox 使用 order
属性放置),#no
,包含 5 个用作按钮的图标.order
属性在这些图标上无法正常工作.
如果我不使用 order
属性,图标会按自然顺序排列;但是,如果我尝试使用 order
属性来布置它们,则它不起作用.在代码中,info-div
(order:3
) 应该是最后一个元素.不是.我可以通过更改源中的顺序来获得我想要的顺序;不过,我想澄清一下我的误解.
<头><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://cdn.rawgit/twbs/bootstrap/v4-dev/dist/css/bootstrap.css"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>纽约肖像</title><风格>html,正文{宽度:100%;高度:100%;}#容器 {高度:100%;宽度:100%;显示:弹性;显示:-webkit-flex;flex-wrap: nowrap;-webkit-flex-wrap: nowrap;对齐内容:居中;-webkit-justify-content:中心;对齐项目:居中;-webkit-align-items:居中;对齐内容:间隔;-webkit-align-content:间隔;}#不 {填充:1rem;显示:弹性;显示:-webkit-flex;flex-wrap: nowrap;-webkit-flex-wrap: nowrap;对齐内容:间隔;-webkit-justify-content:间隔;对齐项目:居中;-webkit-align-items:居中;对齐内容:间隔;-webkit-align-content:间隔;弹性:1 1 自动;-webkit-flex:1 1 自动;}.图标 {保证金:自动;弹性增长:1;弹性基础:自动;}button:ACTIVE {//触摸模式的反馈背景:水色;}//接下来是图像.img { 宽度:8vmin;}//生活在#no 中的东西#info-div1 {订单:3;-webkit-order: 3;}#减 {订单:0;-webkit-order: 0;}#hb2 {顺序:-1;-webkit-order: -1;}#plus {订单:1;-webkit-order: 1;}#comment-button-div {订单:2;-webkit-order: 2;}@media 屏幕和(方向:横向){#容器 {弹性方向:行;-webkit-flex-direction: 行;}#不 {弹性方向:列;-webkit-flex-direction: 列;高度:100%;最大宽度:10rem;订单:0;-webkit-order: 0;}}@media 屏幕和(方向:纵向){#容器 {弹性方向:列;-webkit-flex-direction: 列;}#不 {弹性方向:行;-webkit-flex-direction: 行;最大高度:10rem;宽度:100%;订单:2;-webkit-order: 2;}}</风格><script src="https://www.google/recaptcha/api.js"异步延迟>头部><身体><div id="容器"><div id='no'><div id='minus' class="icon" title="不是特别的."><a href="#" id="nHeart" ><img class="img icon" src="http://gps-photo/images/Not.svg"/></a><div id="hb2" title="登录/注册/上传/设置" class="btn-group icon"><div class="下拉"><img class="dropdown-toggle img" src="http://gps-photo/images/cogwheel-525702-1.svg" id="dropdownMenu1"数据切换="下拉" aria-haspopup="true" aria-expanded="false"/><div class="下拉菜单"><a class="dropdown-item clr" data-toggle="modal" href="#myModal"></a><a class="dropdown-item cup" data-toggle="modal" href="#myModal"></a><a class="dropdown-item cmore" data-toggle="modal" href="#myModal"></a><a class="dropdown-item cpony" data-toggle="modal" href="#myModal"></a><a class="dropdown-item cabout" data-toggle="modal" href="#myModal"></a>
</div><!-- 结束 hb2 --><div id='plus' class="icon" title="喜欢它!"><a href="#" id="heart1" ><img class="img" src="http://gps-photo/images/red-304570-1.svg"/></a>
<div id='comment-button-div' class="icon" title="点击评论"><a class="comment-page" data-toggle="modal" ><img class="img" id='comment-button' src="http://gps-photo/images/comments-97860-3.svg"/></a>
<div id='info-div1' class="icon" title='信息' ><a class="info-page" data-toggle="modal" ><img id="info1" class="img" src="http://gps-photo/images/information-39064-2.svg"/></a>
<!-- 首先是 jQuery,然后是 Bootstrap JS.--><script src="https://ajax.googleapis/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://cdn.rawgit/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>