Question

我想将可折叠按钮分配到导航栏的右侧（Bootstrap v4）。我试图将按钮包裹在：

<div class='nav navbar-nav navbar-right'>

并且还添加了float-xs-right类......但没有成功。

我创建了以下plunker：

https://plnkr.co/edit/AeUbHyXL34G2VdQKpEpo?p=preview

Answer 1

float-xs-right在Bootstrap Alpha 5中引入，但是plunker CSS引用了Bootstrap Alpha 4.它适用于Alpha 5：

http://www.codeply.com/go/Ina8YfuXaU

Answer 2

可以添加绝对位置或固定位置并将其移至右侧

.navbar .navbar-toggler{
  position: absolute;
  right: 0;
}

您还希望将可折叠内容移出nav

    <nav class="navbar navbar-light bg-faded">
      <a class="navbar-brand" href="#">My Brand</a>
      <button class="navbar-toggler float-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">Expand</button>
    </nav>

    <div class="collapse" id="exCollapsingNavbar">
      <div class="bg-inverse text-muted p-1">
        <h4>Collapsed content</h4>
        <span class="text-muted">Toggleable via the navbar brand.</span>
      </div>
    </div>

请参阅更新的plunker

Answer 3

只需修复text-align:right

即可

.navbar {
  text-align:right;
}

尝试使用此代码段

.navbar {
  text-align:right;
}
#exCollapsingNavbar {
  text-align:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <!-- Le styles -->
    <link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" />
    
    <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <nav class="navbar navbar-light bg-faded">
      <a class="navbar-brand" href="#">My Brand</a>
  <button class="navbar-toggler float-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">Expand</button>
  <div class="collapse" id="exCollapsingNavbar">
    <div class="bg-inverse text-muted p-1">
      <h4>Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
</nav>
    
  </body>

</html>

Allign可折叠按钮位于导航栏右侧

3 个答案: