Отзывчивый <a name> с помощью Bootstrap

Question

У меня есть следующее:

<!-- Image map here with links to #anchor1, #anchor2 and #anchor3 -->

<!-- more code -- >

<div class="row">
  <a name="anchor1" />
  <div class="col-xs-12 col-md-4">Anchor 1</div>
  <a name="anchor2" />
  <div class="col-xs-12 col-md-4">Anchor 2</div>
  <a name="anchor3" />
  <div class="col-xs-12 col-md-4">Anchor 3</div>
</div>

Когда я использую устройство с небольшим разрешением, ящики располагаются один над другим. Тем не менее, якоря не будут прокручиваться вниз к новым позициям. Кажется, предполагается, что назначение якоря такое же, как если бы оно было на устройствах с более высоким разрешением (в этом случае они находятся в одном ряду).

Любое исправление для этого?

PS Я использую rwdimagemaps, чтобы изменить размеры навигационных ссылок, так что это не проблема.

Answer 1

При небольшом размере div возвращаются к нормальным, не плавающим блокам. Таким образом, у вас есть встроенные элементы (ссылки), обертывающие элементы уровня блока (div).

Установка ссылок на блоки (возможно, даже inline-блоки), вероятно, исправит это.

Если встроенный блок работает (и я думаю, что должен), вы можете использовать этот же стиль независимо от ширины экрана:

a[name^="anchor"]{display:inline-block}

В противном случае, если это займет block Заверните это медиа-запрос:

@media (max-width:768px){
    a[name^="anchor"]{display:block}
}