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

通常我会尝试不使用内联样式。您的模板具有响应性，因此您的页面布局会在断点之间发生变化 - 内联样式标记不适合。

紫色环在移动设备的右侧保留，但在桌面分辨率上返回到左侧

1 个答案: