Question

您好我想知道如何将我的导航栏内容移到右侧。到目前为止，默认情况下它们位于左侧。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">About<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item active">
            <a class="nav-link active" href="#">Portfolio</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>

Answer 1

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="text-align: right;">
   ...
</nav>

Answer 2

你有很多可能性。

.navbar { float: right;} 
or
.navbar { text-align: right;}

这是2个解决方案： JsFiddle - align navbar to the right

祝你好运

Answer 3

只需添加.ml-auto

即可像这样

<ul class="navbar-nav ml-auto">

Play here

Answer 4

由于bootstrap4使用flexbox，您可以使用justify-content-end类来对齐右侧的项目：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end">
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
		<ul class="navbar-nav">
		  <li class="nav-item active">
			<a class="nav-link" href="#">About<span class="sr-only">(current)</span></a>
		  </li>
		  <li class="nav-item active">
			<a class="nav-link active" href="#">Portfolio</a>
		  </li>
		  <li class="nav-item active">
			<a class="nav-link" href="#">Contact</a>
		  </li>
		</ul>
	</div>
</nav>

＆＃13;

另一个选择是向您的margin-left:auto和button添加ul class="navbar-nav"（ml-auto），如下所示：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNav">
		<ul class="navbar-nav ml-auto">
		  <li class="nav-item active">
			<a class="nav-link" href="#">About<span class="sr-only">(current)</span></a>
		  </li>
		  <li class="nav-item active">
			<a class="nav-link active" href="#">Portfolio</a>
		  </li>
		  <li class="nav-item active">
			<a class="nav-link" href="#">Contact</a>
		  </li>
		</ul>
	</div>
</nav>

＆＃13;

Answer 5

.navbar-collapse{
 justify-content: flex-end
}

或者可以使用此

.navbar-collapse{ direction: rtl; }

Answer 6

使用此代码

.navbar{ text-align:right;}

将Navbar间隔到右侧

6 个答案: