столбец иконок в bootstrap v4

У меня есть простой столбец значков, использующий flexbox в bootstrap v4. Это нормально, но если вы затем нажмете на значок, положение немного изменится. Кажется, это происходит только в хроме. Вот скрипка:

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

Не вижу причин, по которым позиционирование должно меняться.

Может кто-нибудь сказать мне, что не так.


flexbox bootstrap-4 twitter-bootstrap-4
person LenB    schedule 27.01.2016    source источник
comment
В скрипке рассмотрите возможность удаления сценариев на обеих панелях. Вы можете добавить ссылку начальной загрузки в качестве внешнего ресурса.   -  person Michael Benjamin    schedule 27.01.2016
comment
Удалены ссылки, как было предложено: jsfiddle.net/lenb/shr8bk89/12.   -  person LenB    schedule 27.01.2016
comment
Ok. Но при нажатии на иконку ничего не происходит. Вы можете воспроизвести проблему в демо?   -  person Michael Benjamin    schedule 27.01.2016
comment
Когда я нажимаю на значок (в хроме), значки перемещаются. В фаерфоксе их нет. Я не думаю, что они должны двигаться. Мне кажется, что это ошибка в хроме, но если это так, я не знаю, что делать дальше. Вне скрипки я получаю такое же поведение. На хроме и файрфоксе по разному.   -  person LenB    schedule 28.01.2016
comment
Я в Chrome и ничего не происходит. Но я думаю, что знаю, в чем проблема. При нажатии иконки двигаются вертикально? Нравится вверху страницы?   -  person Michael Benjamin    schedule 28.01.2016
comment
Да. Они сближаются.   -  person LenB    schedule 28.01.2016
comment
Ну, как я уже сказал, я не вижу здесь никакого движения при клике. Однако, когда вы используете символ # в теге привязки, это поднимает страницу наверх.   -  person Michael Benjamin    schedule 28.01.2016
comment
Поэтому во время тестирования, если вы не хотите видеть никаких перемещений страниц, подумайте о замене <a href="#" ... > на <a href="javascript:void(0)" ... >.   -  person Michael Benjamin    schedule 28.01.2016
comment
А вы используете хром? Я пробовал нестабильный хром и работал в режиме инкогнито. Я получаю такое же поведение на скрипке (jsfiddle.net/lenb/shr8bk89/13) . Изменение вертикального разделения. Я вижу такое же поведение на реальной странице (это часть gps-photo.org). В Chrome нажатие на значок изменяет вертикальное разделение; в фаерфоксе нет.   -  person LenB    schedule 28.01.2016
comment
И скрипка, и ваша веб-страница отлично работают для меня в Chrome. Никакого движения иконок, даже незначительного.   -  person Michael Benjamin    schedule 28.01.2016
comment
Возможный дубликат списка столбцов со ссылками - элементы перемещаются вниз по клику в Chrome   -  person Bass Jobsen    schedule 02.02.2016

Ответы (1)


arrow_upward
0
arrow_downward

Использование normalize.css в качестве загружаемого первым помогает нормализовать вертикальное выравнивание для Chrome.

person Arnold    schedule 22.02.2016