Bootstrap导航栏右对齐将项目向左推[重复]答案

【问题标题】：Bootstrap navbar right alignment pushes items to the left [duplicate]Bootstrap导航栏右对齐将项目向左推[重复]
【发布时间】：2017-08-16 01:19:04
【问题描述】：

编辑：我已经解决了这个问题。事实证明，导航栏并不是真正的 100% 宽度，也没有到达屏幕边缘。

我目前正在努力使用 bootstrap 4 导航栏。我在使用以前的版本时遇到了同样的问题。网上有很多解决方案，但它们似乎不适用于我的情况。

默认配置：

使用 mx-auto：

我希望徽标留在原处，链接也很好，但“登录”链接应该位于屏幕的右边缘。最接近我想要的效果的是使用 float-right。即便如此，链接最终会在距离右边缘 150 像素处而没有应用边距。

.navbar {
	
	width:100%;
	background: none !important;

	@media(max-width:34em) {
		background: black !important;
	}

	.navbar-toggler {
		cursor:pointer;
		outline:0;
	}

	.nav-link {
		text-transform:uppercase;
		font-weight:bold;
	}

	.nav-item {
		padding: 0 1rem;

		@media(max-width: 34em) {
			padding: 0;
		}

		.nav-link {
			@media(max-width: 34em) {
				font-weight:normal;
				color:#fff !important;
			}
		}
	}
}

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <meta http-equiv="x-ua-compatible" content="ie=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
        <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="/css/bootstrap.css">
        <link rel="stylesheet" href="/css/style.css">
    </head>

    <body>

        <div id="hero">
            <div class="container">
                <div class="row">
                    <nav class="navbar navbar-toggleable-md navbar-inverse">
                        <a href="#" class="navbar-brand text-primary" id="logo">LOGO</a>
                        <a href="#" class="nav-item text-primary" id="login"></a>

                        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>

                        <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link text-primary" href="#">LINK1</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-primary" href="#">LINK2</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-primary" href="#">LINK3</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-primary" href="#">LINK4</a>
                                </li>
                            </ul>
                            <ul class="navbar-nav mx-auto">
                            	<li class="nav-item">
                                    <a class="nav-link text-primary" href="#">LOGIN</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>

【问题讨论】：

标签： html css alignment navbar twitter-bootstrap-4

【解决方案1】：

好吧，使用引导程序，有一个导航栏右类。因此，在您想要向右的导航部分：

<ul class="nav navbar-nav mx-auto navbar-right">
    <li class="nav-item">
      <a class="nav-link text-primary" href="#">LOGIN</a>
    </li>
</ul>

此外，bootstrap 4 处于 Alpha 阶段，大多数人使用上面表示的 bootstrap 3。我不完全确定 mx-auto 是什么（从未听说过）。但我知道 navbar-right 会将那个链接放在右边。

【讨论】：

这是我之前遇到的问题。它“有点”奏效了。我的意思是，它确实将链接放在了右侧，但没有放在边缘。事实上，它与上面描述的相差甚远。