Question

我创建了一个在“WebMatrix”中使用它时看起来很棒的网站。当我尝试发布它时（在通过“Bahnhof”托管的服务器上，仅使用HTML），没有看到任何Bootstrap效果。

可能是什么问题？我曾经通过同一台服务器上传了一个网站，之前它是CSS依赖的，然后才有效。我用朋友的服务器测试过这个网站，然后就可以了。 “Bahnhof”说他们的服务器是基于Linux的，它只支持HTML和其他支持浏览器的东西。

实施例。来自index.html的代码（我知道它有点长，但我知道网站编码，大多数CSS是我通过教程和Stackoverflow找到的东西）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="bootstrap.css">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">  
    .navbar-inner {
        background: #FFF; /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 
        100%); 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba
        (69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); 
        background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1)   
        100%);
        background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /
        background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); 
        background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 
        100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', 
        endColorstr='#000000',GradientType=0 );
        border: 0px solid black;
        }

    .navbar .nav > li > a {
        color: #000;
        background: #ffffff !important;
        padding: 80px;
        font-weight:bolder;
        font-family: 'Simplified Arabic Fixed';
    }      

    .navbar .nav > li > a:hover{
        color:#000 !important;
        background: #ffffff !important;
        font-family: 'Simplified Arabic Fixed';
        font-weight:bolder;
        -webkit-transition:background 1s ease;
        -moz-transition:background 1s ease;
        -o-transition:background 1s ease;
        transition:background 1s ease;
    }

    .navbar .nav .active > a,
    .navbar .nav .active > a:hover,
    .navbar .nav .active > a:focus {
        color: #000;
        background: #ffffff !important;
        font-weight:bolder !important;;
        font-family: 'Simplified Arabic Fixed';
        font-size: 18px;
        box-shadow:none;
        background: #ffffff !important;
        outline: none;
        -moz-outline-style: none;
        -webkit-outline: none;
        -o-outline: none;
        -ms-outline: none;
    }

    .nav-collapse a {
        background: #ffffff !important;
        font-weight:bolder !important;
        font-family: 'Simplified Arabic Fixed';
        font-size: 18px;
        text-shadow:none !important;
        outline: none;
        -moz-outline-style: none;
        -webkit-outline: none;
        -o-outline: none;
        -ms-outline: none;
    }

    .navbar .nav > li > a:visited {
        color:  #000;
        background: #ffffff !important;
        font-weight:bolder !important;
        font-family: 'Simplified Arabic Fixed';
        font-size: 18px;
        outline: none;
        -moz-outline-style: none;
        -webkit-outline: none;
        -o-outline: none;
        -ms-outline: none;
      }

    .hero-unit {
        padding:20% 30% 20% 30%;
        margin-bottom: 0px;
        font-size: 18px;
        font-weight: 200;
        font-family: 'Simplified Arabic Fixed';
        line-height: 30px;
        color: inherit;
        background-color: #FFF;
        border:0px solid #cacaca;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }

    .nav {
        padding-right:  10%;
        padding-left:  10%;
    }

    .body {
        padding-bottom: 20%;
    }


</style>  
<script src="jquery-1.9.0.js"></script>
<script src="bootstrap.js"></script>
<script type="text/javascript"> </script>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #FFF">

<div class="navbar navbar-fixed-bottom center">  
<div class="navbar-inner-inverse">  
<div class="container-fluid">  
      <ul class="nav">
          <li class="active"><a href="#">HOME</a></li>
          <li><a href="about.html">ABOUT</a></li>
          <li><a href="report.html"">REPORTS</a></li>
          <li><a href="contact.html">CONTACT</a></li>
    </ul>
</div>
</div>  
</div>  
</div> 
  <div class="hero-unit">
      <div class="row-fluid">
        <div class="span12">
          <h2>Home</h2>
          <p> </p>
        </div>
     </div>
   </div>

  </body>
  </html>

Answer 1

仔细检查bootstrap.min.css的url是否正确，检查服务器上是否存在您在链接标记中包含它的路径。

请记住以

开头的链接

查看服务器上的目录root和仅

的链接

bootstrap.css

将查找链接标记所在文件的同一目录。

您可以使用浏览器调试程序检查资源是否实际被加载，例如Chrome中的开发人员工具。

此外，包括bootstrap.min.css与包含bootstrap.css相同（假设您没有修改其原始文件。

bootstrap.min.css是一个所谓的缩小版本，意味着已从文件中删除了空格以使其更小，并且应该允许您的页面加载更快。

使用Bootstrap创建的网站无法正确显示

1 个答案: