Question

尝试设置一个完全基本的引导页面。主要目标是具有下拉菜单的功能引导导航栏。但是，bootstrap没有加载，navbar和jumbotron没有正确显示。 Chrome和Firefox不提供任何错误消息。 bootstrap.css，bootstrap.js和jquery-3.1.1.js都在本地文件夹中的默认状态。我无法理解为什么页面元素没有加载。

编辑：下面的评论者指出我使用的是旧版本的bootstrap。布局已更正，但导航栏下拉菜单动画未触发。

我有一个“公共”文件夹，其作用类似于“资产”文件夹。它是Sinatra的默认文件，包含以下文件夹。

├── public
│   ├── images
│   ├── js
│   │   ├── bootstrap.js
│   │   └── jquery-3.1.1.js
│   └── stylesheets
│       └── bootstrap.css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>NY Freegan Forum</title>
    <link href="/stylesheets/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <a class="navbar-brand" href="/">NY Freegan Forum</a>
    
        <ul class="nav navbar-nav navbar-right">
         <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">joelbitar1986<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="/users/joelbitar1986">Profile</a></li>
              <li><a href="/reports/new">New Report</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="/logout">Logout</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>

  <div class="jumbotron vert-offset-top-13">
    <div class="container">
      <h1>Jumbotron Title</h1>
      <p>website information</p>
      <br><br>
    </div>
  </div>

    <script src="/js/jquery-3.1.1.js"></script>
    <script src="/js/bootstrap.js"></script>
  </body>
</html>

链接到Github Repo：https://github.com/joelbitar1986/ny-freegan-forum
运行shotgun以查看localhost

上的页面

Answer 1

如果你使用的是正确版本的bootstrap，那就可以了。

您应该做的一件事是查看页面源。您将看到脚本是否实际加载。

Match match = Regex.Match(value, @"^([A-Za-z-]+) (\d+)");
if (match.Success)
{
    var word = match.Groups[1].Value;
    var num  = match.Groups[2].Value;
}

Answer 2

答案：我使用的是旧版本的bootstrap。

Bootstrap页面破坏。导航栏和页面元素未显示

2 个答案: