Question

我运行Ruby on Rails 5并使用bootstrap gem。我遇到的问题是当我把html放在我的某个部分中时，我看起来非常奇怪＆＃39; nav-bar＆＃39;。

library(microbenchmark)
microbenchmark(
  vector = data$hp / data$wt,
  for_loop = {
    hp_wt <- numeric(0)
    for (i in seq.int(nrow(data))) {
      hp_wt[i] <- with(data[i, ], hp / wt)
    }
  }
)

Unit: microseconds
     expr     min      lq      mean  median      uq      max neval
   vector   9.817  10.573  13.34426  11.706  12.461   47.954   100
 for_loop 431.576 463.292 496.04711 469.333 494.442 1723.656   100

之后我有一个非常奇怪的导航栏，它看起来如下图所示。

此导航栏内联最重要的是它如下图所示

感谢您的帮助。

Answer 1

请尝试以下代码：

<div class="navbar-default" role="navigation">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">links toggle button</span>
        <span class="mdl-color--white white icon-bar"></span>
        <span class="mdl-color--white white icon-bar"></span>
        <span class="mdl-color--white icon-bar"></span>
    </button>
    <a href="#"><span class="navbar-brand">Company Name</span></a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav" style="float: right;">
        <li><a href="#">First Item</a></li>
        <li><a href="#">Second Item</a></li>
        <li><a href="#">Third Item</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
                Dropdown<span class="mdi mdi-chevron-down"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation"><a href="#">First Item</a></li>
                <li role="presentation"><a href="#">Second Item</a></li>
                <li role="presentation"><a href="#">Third Item</a></li>
            </ul>
        </li>
    </ul>
</div>

Answer 2

您的代码正常

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar-default" role="navigation">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">links toggle button</span>
        <span class="mdl-color--white white icon-bar"></span>
        <span class="mdl-color--white white icon-bar"></span>
        <span class="mdl-color--white icon-bar"></span>
    </button>
    <a href="#"><span class="navbar-brand">Company Name</span></a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav" style="float: right;">
        <li><a href="#">First Item</a></li>
        <li><a href="#">Second Item</a></li>
        <li><a href="#">Third Item</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li role="presentation"><a href="#">First Item</a></li>
            <li role="presentation"><a href="#">Second Item</a></li>
            <li role="presentation"><a href="#">Third Item</a></li>
          </ul>
        </li>
    </ul>
</div>

Bootstrap Navbar以非常奇怪的形式显示

2 个答案: