bootstrap v4中的图标列答案

【问题标题】：column of icons in bootstrap v4bootstrap v4中的图标列
【发布时间】：2016-05-04 17:29:54
【问题描述】：

我在 bootstrap v4 中有一个使用 flexbox 的简单图标列。它很好，但是如果您然后单击一个图标，则位置会略有变化。似乎只发生在 chrome 中。这是一个小提琴：

https://jsfiddle.net/lenb/shr8bk89/10/
` HTML：

<body>


    <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='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>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>

CSS：

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 


   #removal {
     border-color: black;
     border-top: 10rem;
   }

   html,
   body {
     width: 100%;
     height: 100%;
   }



   #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;
   }


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

 /*   // stuff living in #no */
   #info-div1 {
     order: 3;
     -webkit-order: 3;
   }

   #minus {
     order: 0;
     -webkit-order: 0;
   }

   #plus {
     order: 1;
     -webkit-order: 1;
   }

   #comment-button-div {
     order: 2;
     -webkit-order: 2;
   }


     #no {
       flex-direction: column;
       -webkit-flex-direction: column;
       height: 100%;
       max-width: 10rem;
       order: 0;
       -webkit-order: 0;
     }

我认为没有理由改变定位。

谁能告诉我哪里出了问题。

【问题讨论】：

在小提琴中，考虑删除两个窗格中的脚本。您可以将引导链接添加为外部资源。
建议删除链接：jsfiddle.net/lenb/shr8bk89/12
好的。但是当你点击一个图标时，什么也没有发生。你能重现演示中的问题吗？
当我点击一个图标（在 chrome 中）时，图标会移动。在 Firefox 上他们没有。我认为他们不应该搬家。对我来说看起来像 chrome 中的一个错误，但如果是这样，我不知道如何继续。在小提琴之外，我得到了同样的行为。它在 chrome 和 firefox 上有所不同。
我在 Chrome 上，但没有任何反应。但我想我知道问题出在哪里。单击时，图标垂直移动？喜欢页面顶部？

标签： flexbox twitter-bootstrap-4 bootstrap-4

【解决方案1】：

使用 normalize.css 作为第一个加载有助于规范 Chrome 的垂直对齐

【讨论】：