css - 在导航栏中添加后退按钮

Question

我正在尝试创建一个出现在我的应用程序顶部的导航栏。我希望导航栏看起来像这样:

+--------------------------------------------------------+
|                                                        |
| <-  Status                                             |
|                                                        |
+--------------------------------------------------------+

在一次失败的尝试中，我创建了以下导航栏，可以在 bootply 中看到.

<nav class="navbar">
  <div class="container-fluid">
    <div class="navbar-header navbar-default">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#menu">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <div>
        <a class="btn btn-link btn-xs" href="/home"><i class="fa fa-arrow-circle-o-left" style="font-size: 2.5rem;"></i></a>
        <div class="navbar-brand">Hello</div>
      </div>
    </div>
  </div>           
</nav>

如果您访问 Bootply，您会看到箭头出现在标题的右侧而不是左侧。我不知道发生了什么。另外，后退按钮不像文本那样垂直居中。为什么后退按钮出现在标题之后而不是之前？

Answer 1

我可以告诉你两种方式:

一个带有 padding 和 float，另一个带有 flex。

Bootply : http://www.bootply.com/23Knh8HEVE

HTML

<nav class="navbar">
  <div class="container-fluid">
    <div class="navbar-header navbar-default">
      <button class="navbar-toggle collapsed" type="button" data-target="#menu" data-toggle="collapse">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <div>
        <a class="mybtn btn btn-link btn-xs" href="/home"><i class="fa fa-arrow-circle-o-left" style="font-size:2.5rem;"></i></a>
        <div class="navbar-brand">Hello</div>
      </div>
    </div>
  </div>           
</nav>

<nav class="navbar">
  <div class="container-fluid">
    <div class=" navbar-header navbar-default">
      <button class="navbar-toggle collapsed" type="button" data-target="#menu" data-toggle="collapse">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <div class="mycontainer">
        <a class="mybtn2 btn btn-link btn-xs" href="/home"><i class="fa fa-arrow-circle-o-left" style="font-size:2.5rem;"></i></a>
        <div class="navbar-brand">Hello</div>
      </div>
    </div>
  </div>           
</nav>

CSS

.mybtn{float:left;padding:15px;display:inline-block;}

.mycontainer{display:flex;align-items:center;}

附言: 你的按钮在右边，因为品牌在左边 float ......