Purple Ring 在移动设备上停留在右侧，但在桌面分辨率上回到左侧

Question

如果让戒指始终停留在页面的右侧，那就太棒了！不仅仅是移动分辨率。

希望大家帮帮我！

带有屏幕截图的 Dropbox-https://www.dropbox.com/sh/wmyps4zg7tfardq/AABnsmXbAi5XZ29sCJdYA_uNa?dl=0

网页主题-http://startbootstrap.com/template-overviews/freelancer/

此时我的戒指代码：

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                            <a href="#" >
            <img src="ring.png" style="; width: 2.5em; display:inline ; float:right;
                  padding-top: 14px ; height: auto !important"></a>
            <a class="navbar-brand" href="#page-top">Start Bootstrap</a>
        </div>

Answer 1

图像移动的原因是它在.navbar-header内，它根据断点改变大小。

你能把它移出.navbar-header

你能把它放在.container上面的元素中吗？根据你的模板，它总是有一个完整的宽度。

你能有多个按钮吗

如果您的模板带有用于跨设备/屏幕尺寸隐藏和显示的类，那么您可以在移动设备和桌面设备的 2 个位置使用该按钮。将其保留在移动设备所在的位置，但在桌面上查看时隐藏。在桌面上，您可以将其添加为 .navbar-nav ul li 作为按钮，但在移动设备上隐藏。

你能绝对定位吗？

<img src="ring.png" style=";height: auto !important; position:absolute;right:40px;top:14px;"></a>

您可以将right 和top 更改为位置正确。

根据您希望它在不同屏幕尺寸上的位置，您可能需要考虑将内联样式设置为 CSS 类，然后使用媒体查询来定位不同的分辨率。例如，移动优先方法可能是。

.header-ring{
    height: auto !important; 
    position:absolute;
    right:40px;
    top:14px;
}

@media (min-width: 768px) {
    .header-ring{
        right:100px;
    }
}

通常我会尝试不使用内联样式。您的模板是响应式的，因此您的页面布局会在断点之间发生变化——内联样式标签不适合这样做。