Question

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

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

默认配置：

使用mx-auto：

我希望Logo能够保持原样，链接也很好但是＆＃34;登录＆＃34;链接应位于屏幕的右边缘。最接近我想要的效果是使用float-right。即使这样，链接也会从右边缘开始像150px一样没有应用边距。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

嗯，有了bootstrap，就有一个navbar-right类。因此，您想要在右侧的导航部分：

<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会将右边的一个链接放在右边。

Bootstrap导航栏右对齐将项目推向左侧

1 个答案: