Html 为什么我的一些CSS规则不起作用？_Html_Css_Flexbox_Twitter Bootstrap 4

Html 为什么我的一些CSS规则不起作用？

html css

Html 为什么我的一些CSS规则不起作用？,html,css,flexbox,twitter-bootstrap-4,Html,Css,Flexbox,Twitter Bootstrap 4,我有一个嵌套的flexbox布局（使用bootstrap v4），它根据横向/纵向模式改变方向。第一级div（由flexbox使用order属性放置），#no，包含5个用作按钮的图标。在这些图标上，order属性不能像我期望的那样工作如果我不使用order属性，图标将按自然顺序排列；但是，如果我尝试使用order属性来布局它们，它将不起作用。在中，info div（order:3）应该是最后一个元素。事实并非如此。我可以通过在源代码中更改顺序来获得所需的顺序；不过，我想澄清我的误解 <!

我有一个嵌套的flexbox布局（使用bootstrap v4），它根据横向/纵向模式改变方向。第一级

div

（由flexbox使用

order

属性放置），

#no

，包含5个用作按钮的图标。在这些图标上，

order

属性不能像我期望的那样工作

如果我不使用

order

属性，图标将按自然顺序排列；但是，如果我尝试使用

order

属性来布局它们，它将不起作用。在中，

info div

（

order:3

）应该是最后一个元素。事实并非如此。我可以通过在源代码中更改顺序来获得所需的顺序；不过，我想澄清我的误解

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Portrait of New York</title>
      <style>
        html, body {
              width:100%;
              height:100%;
        }
        #container {
          height: 100%; width:100%;
          display: flex;    display: -webkit-flex;
          flex-wrap: nowrap;       -webkit-flex-wrap: nowrap;
          justify-content: center; -webkit-justify-content: center;
          align-items: center;   -webkit-align-items: center;
          align-content: space-between;   -webkit-align-content: space-between;
        }
        #no {
          padding: 1rem;
          display: flex; display: -webkit-flex;
          flex-wrap: nowrap;       -webkit-flex-wrap: nowrap;
          justify-content: space-between; -webkit-justify-content: space-between;
          align-items: center;   -webkit-align-items: center;
          align-content: space-between;   -webkit-align-content: space-between;
          flex: 1 1 auto; -webkit-flex: 1 1 auto;
        } 
        .icon {
          margin: auto;
          flex-grow:1;
          flex-basis: auto;
        }
        button:ACTIVE { // feedback on touch modal
          background: aqua;
        }       
        // next is for images
        .img { width: 8vmin; }
        // stuff living in #no
        #info-div1 {
          order: 3;        -webkit-order: 3;
        }
        #minus {
          order: 0;        -webkit-order: 0;          
        }
        #hb2 {
          order: -1;        -webkit-order: -1;
        }
        #plus {
          order: 1;        -webkit-order: 1;
        }
        #comment-button-div {
          order: 2;        -webkit-order: 2;
        }
      @media screen and (orientation: landscape ){
        #container { 
          flex-direction: row; -webkit-flex-direction: row;
        }
        #no { 
          flex-direction: column; -webkit-flex-direction: column;
          height: 100%;
          max-width: 10rem;
          order: 0;        -webkit-order: 0; 
        }
      }
      @media screen and (orientation: portrait ){
        #container { 
          flex-direction: column; -webkit-flex-direction: column;
        }
        #no {      
          flex-direction: row;   -webkit-flex-direction: row;
          max-height:10rem;
          width:100%;
          order: 2; -webkit-order: 2; 
        }
      }
   </style>
    <script src="https://www.google.com/recaptcha/api.js"
        async defer>
    </script>

 </head>

  <body>
    <div id="container">
      <div id='no'>

        <div id='minus' class="icon" title="Not special.">
          <a href="#" id="nHeart"  >
            <img class="img icon" src="http://gps-photo.org/images/Not.svg"/> 
          </a>
        </div>

        <div id="hb2" title="Login/Register/Uploads/Settings" class="btn-group icon">
          <div class="dropdown">
            <img class="dropdown-toggle img" src="http://gps-photo.org/images/cogwheel-525702-1.svg"  id="dropdownMenu1" 
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"/>
            <div class="dropdown-menu">
              <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>
          </div>
        </div><!-- end hb2 -->
        <div id='plus' class="icon" title="Loving it!">
          <a href="#" id="heart1" >
            <img class="img" src="http://gps-photo.org/images/red-304570-1.svg"/>
          </a>
        </div> 

        <div id='comment-button-div' class="icon" title="Click for comments">
          <a class="comment-page" data-toggle="modal"  >
            <img class="img" id='comment-button' src="http://gps-photo.org/images/comments-97860-3.svg"/>
          </a>
        </div>

        <div id='info-div1' class="icon" title='Information' >
          <a class="info-page" data-toggle="modal" >
            <img id="info1" class="img" src="http://gps-photo.org/images/information-39064-2.svg"/>
          </a>
        </div>

      </div>
    </div>

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>


 </body>
</html>


纽约肖像
html，正文{
宽度：100%；
身高：100%；
}
#容器{
高度：100%；宽度：100%；
显示：flex；显示：-webkit flex；
flex-wrap:nowrap；-webkit flex-wrap:nowrap；
调整内容：中心；-webkit调整内容：中心；
对齐项目：居中；-webkit对齐项目：居中；
对齐内容：间距；-webkit对齐内容：间距；
}
#没有{
填充：1rem；
显示：flex；显示：-webkit flex；
flex-wrap:nowrap；-webkit flex-wrap:nowrap；
调整内容：间距；-webkit调整内容：间距；
对齐项目：居中；-webkit对齐项目：居中；
对齐内容：间距；-webkit对齐内容：间距；
flex:11自动；-webkit flex:1自动；
} 
.图标{
保证金：自动；
柔性生长：1；
弹性基础：自动；
}
按钮：激活{//触摸模式反馈
背景：水；
}       
//接下来是图像
.img{宽度：8vmin；}
//住在#不
#资讯部1{
订单：3；-webkit订单：3；
}
#减去{
订单：0；-webkit订单：0；
}
#hb2{
订单：-1；-webkit订单：-1；
}
#加上{
订单：1；-webkit订单：1；
}
#注释按钮div{
订单：2；-webkit订单：2；
}
@媒体屏幕和屏幕（方向：横向）{
#容器{
弹性方向：行；-webkit弹性方向：行；
}
#不{
弹性方向：列；-webkit弹性方向：列；
身高：100%；
最大宽度：10雷姆；
订单：0；-webkit订单：0；
}
}
@媒体屏幕和屏幕（方向：纵向）{
#容器{
弹性方向：列；-webkit弹性方向：列；
}
#不{
弹性方向：行；-webkit弹性方向：行；
最大高度：10雷姆；
宽度：100%；
订单：2；-webkit订单：2；
}
}

CSS注释：使用

/**/不是/…
或
您遇到的问题与您的flex代码无关
问题是您正在使用行注释语法对文本进行注释，这是无效的CSS
button:ACTIVE { // feedback on touch modal
   background: aqua;
}

// next is for images
.img { width: 8vmin; }

因此，您实际上所做的是发布无效代码，而不是注释掉行，而是调用CSS错误处理，这将终止下一条规则。换句话说，任何遵循//text
的规则都将被忽略，就像您这样做一样：xheight:50px

这就是为什么order
不适用于您的图标：
// stuff living in #no
#info-div1 {
    order: 3;
    -webkit-order: 3;
}

坚持标准的CSS注释方法。用/*
开始评论。用*/
结束注释
/* stuff to be commented out */

一旦您对代码进行了调整，order
属性就可以正常工作（并且，正如您所预料的，由于以前忽略的代码，会发生其他更改）
请在此处阅读有关CSS注释的更多信息：

~W3C


~Tab Atkins，Jr.，CSS工作组


最后，另请注意：
您将供应商前缀代码放在标准非固定版本之后
#container {
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;

    justify-content: center;
    -webkit-justify-content: center;

    align-items: center;
    -webkit-align-items: center;

    align-content: space-between;
    -webkit-align-content: space-between;
}

你应该考虑扭转这个局面。非固定版本（W3C）应该排在最后，因此它始终是级联中的首选版本
 CSS注释：使用/**/不是/…
或
您遇到的问题与您的flex代码无关
问题是您正在使用行注释语法对文本进行注释，这是无效的CSS
button:ACTIVE { // feedback on touch modal
   background: aqua;
}

// next is for images
.img { width: 8vmin; }

因此，您实际上所做的是发布无效代码，而不是注释掉行，而是调用CSS错误处理，这将终止下一条规则。换句话说，任何遵循//text
的规则都将被忽略，就像您这样做一样：xheight:50px

这就是为什么order
不适用于您的图标：
// stuff living in #no
#info-div1 {
    order: 3;
    -webkit-order: 3;
}

坚持标准的CSS注释方法。用/*
开始评论。用*/
结束注释
/* stuff to be commented out */

一旦您对代码进行了调整，order
属性就可以正常工作（并且，正如您所预料的，由于以前忽略的代码，会发生其他更改）
请在此处阅读有关CSS注释的更多信息：

~W3C


~Tab Atkins，Jr.，CSS工作组


最后，关于separa