在Navbar中添加后退按钮

时间:2016-04-05 17:56:59

标签: css twitter-bootstrap

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

+--------------------------------------------------------+
|                                                        |
| <-  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,您可以看到箭头显示在标题的右侧而不是左侧。我不知道发生了什么。另外,后退按钮不像文本那样垂直居中。为什么后退按钮出现在标题之后而不是之前?

1 个答案:

答案 0 :(得分:1)

我可以告诉你两个方面:

一个使用as.integer()alexis <- function() { n <- 2; lapply(0:(((n*n)^2)-1),function(i) matrix(as.integer(intToBits(i)[seq_len(n*n)]),n,n)); }; identical(bgoldst(),alexis()); ## [1] TRUE microbenchmark(bgoldst(),alexis(),times=1000L); ## Unit: microseconds ## expr min lq mean median uq max neval ## bgoldst() 64.148 70.136 77.98883 72.702 77.4055 1093.083 1000 ## alexis() 48.325 54.313 63.70390 56.878 61.1550 3271.121 1000 ,另一个使用padding

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

<强> HTML

float

<强> CSS

flex

<强> PS 您的按钮位于右侧,因为该品牌在左侧漂浮......