html - 当我将导航栏位置更改为固定时，它会改变屏幕的两侧并收缩

Question

首先，我想声明我正在使用 Bootstrap 框架，并且我知道他们有一个导航栏模板，但它不适合我试图用这个导航栏做的事情

该栏应该是全宽的，并且有一个正确的 float ，直到我添加 position:fixed 到它。然后它缩小到大约 30% 的屏幕宽度并向左浮动。

我从下面的导航栏中添加了代码片段，但我无法将 Bootstrap 库添加到代码片段中，因此无论哪种方式，它在此处看起来都不正确。

如果您想现场观看:http://test.suburbandogma.com/test-three.html

.container {
	width: 100%;
	margin: 0;
	padding: 0;
}

#top-nav {
	position: fixed;
	background-color: #f8f8f8;
	padding-top: 0.3em;
	border-bottom: 0.1em solid #ccc;
}

.border-right {
	border-right: 0.1em solid #ccc;
}

#top-list li {
	padding-right: 0.5em;
}

#top-list li:nth-child(6) {
	margin-right: 0.5em;
}

#top-list li a {
	font-family: 'Open-sans', sans-serif;
	font-size: 0.85em;
	font-weight: bold;
	color: #808080;
}

.top-icons {
	position: relative;
	top: 0.2em;
	height: 15px;
	width: 15px;
}

<div class="container">
		<div class="row" id="top-nav">
			<div class="col-md-12">
				<ul class="pull-right list-inline" id="top-list">
					<li class="border-right"><a href="#">Support@domainname.com</a></li>
					<li class="border-right"><a href="#">Terms of Service</a></li>
					<li class="border-right"><a href="#">Privacy Policy</a></li>
					<li><a href="#"><img class="img-responsive top-icons" src="/images/icons/twitter-icon.svg" alt="Twitter Icon"/>
					<li><a href="#"><img class="img-responsive top-icons" src="/images/icons/facebook-icon.svg" alt="Facebook Icon"/>
					<li><a href="#"><img class="img-responsive top-icons" src="/images/icons/skype-icon.svg" alt="Skype Icon"/>
				</ul>
			</div>
		</div>
	</div>

Answer 1

只需将#top-nav 的宽度设置为 100%，您还可以放弃行和列 div。

HTML:

<div id="top-nav">
    <ul class="pull-right list-inline" id="top-list">
        <li class="border-right"><a href="#">Link 1</a></li>
        <li class="border-right"><a href="#">Link 2</a></li>
        <li class="border-right"><a href="#">Link 3</a></li>
        <li><a href="#"><img class="img-responsive top-icons" src="/images/icons/twitter-icon.svg" alt="Twitter Icon"></a></li>
        <li><a href="#"><img class="img-responsive top-icons" src="/images/icons/facebook-icon.svg" alt="Facebook Icon"></a></li>
        <li><a href="#"><img class="img-responsive top-icons" src="/images/icons/skype-icon.svg" alt="Skype Icon"></a></li>
    </ul>
</div>

CSS:

#top-nav {
    position: fixed;
    background-color: #F8F8F8;
    width: 100%;
    padding-top: 0.3em;
    border-bottom: 0.1em solid #CCC;
}