響應<a name>與引導

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> 

當我使用的是小分辨率設備，箱子被放置在另一個之上。但是，錨點不會向下滾動到新定位的框。它似乎假定主機的命運與在更高分辨率的設備上（在這種情況下，它們在同一行上）是一樣的。

有沒有解決這個問題？

P.s.我正在使用rwdimagemaps來調整導航鏈接的大小，這不是問題。

Answer 1

在小尺寸上，div恢復爲正常的未浮動塊。所以你有內聯元素（鏈接）包裝塊級元素（div）。

設置鏈接到塊（甚至可能是內聯塊）可能會解決這個問題。

如果inline-block的工作（我認爲它應該），你可以不考慮使用相同的風格，屏幕寬度的：

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

否則，如果它需要block，包裝這是一個媒體 - 查詢：

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