“引导”；导航栏（&Q）；css类在我的html页面上不起作用_Html_Css_Twitter Bootstrap_Twitter Bootstrap 3

“引导”；导航栏（&Q）；css类在我的html页面上不起作用

html css twitter-bootstrap twitter-bootstrap-3

“引导”；导航栏（&Q）；css类在我的html页面上不起作用,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我是Bootstrap的新手，我正在跟随Brad Hussey Bootstrap教程学习Bootstrap  <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

我是Bootstrap的新手，我正在跟随Brad Hussey Bootstrap教程学习Bootstrap

    <!--Mobile viewport optimized-->
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
    <div class="container" id="main">
       <div class="navbar navbar-fixed-top">
           <div class"container">
                <a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
           </div><!--end container-->
       </div><!--navbar-->
    </div><!--end container--></body>

Navbar css类根本没有为我的网页加载。我把index.html放在bootstrap css文件夹之外，我没有提供正确的路径吗？我遗漏了什么？？如果没有什么帮助，我们将不胜感激

    <!--Mobile viewport optimized-->
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
    <div class="container" id="main">
       <div class="navbar navbar-fixed-top">
           <div class"container">
                <a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
           </div><!--end container-->
       </div><!--navbar-->
    </div><!--end container--></body>

正在附加图像和代码段

    <!--Mobile viewport optimized-->
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
    <div class="container" id="main">
       <div class="navbar navbar-fixed-top">
           <div class"container">
                <a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
           </div><!--end container-->
       </div><!--navbar-->
    </div><!--end container--></body>

original.png是我想要的页面外观。 my page.png是我的页面的外观

    <!--Mobile viewport optimized-->
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
    <div class="container" id="main">
       <div class="navbar navbar-fixed-top">
           <div class"container">
                <a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
           </div><!--end container-->
       </div><!--navbar-->
    </div><!--end container--></body>

我的开发者控制台也没有显示任何错误，如图所示

    <!--Mobile viewport optimized-->
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
    <div class="container" id="main">
       <div class="navbar navbar-fixed-top">
           <div class"container">
                <a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
           </div><!--end container-->
       </div><!--navbar-->
    </div><!--end container--></body>

这是我的密码： `

    <!--Mobile viewport optimized-->
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
    <div class="container" id="main">
       <div class="navbar navbar-fixed-top">
           <div class"container">
                <a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
           </div><!--end container-->
       </div><!--navbar-->
    </div><!--end container--></body>

    <!--Mobile viewport optimized-->
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
    <div class="container" id="main">
       <div class="navbar navbar-fixed-top">
           <div class"container">
                <a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
           </div><!--end container-->
       </div><!--navbar-->
    </div><!--end container--></body>

谢谢，呼吸

    <!--Mobile viewport optimized-->
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
    <div class="container" id="main">
       <div class="navbar navbar-fixed-top">
           <div class"container">
                <a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
           </div><!--end container-->
       </div><!--navbar-->
    </div><!--end container--></body>

您的问题可能在这里：

    <!--Mobile viewport optimized-->
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
    <div class="container" id="main">
       <div class="navbar navbar-fixed-top">
           <div class"container">
                <a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
           </div><!--end container-->
       </div><!--navbar-->
    </div><!--end container--></body>

<a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>

将其修改为：

    <!--Mobile viewport optimized-->
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
    <div class="container" id="main">
       <div class="navbar navbar-fixed-top">
           <div class"container">
                <a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
           </div><!--end container-->
       </div><!--navbar-->
    </div><!--end container--></body>

<a class="navbar-brand" href="#"><img src="images/logo.png" alt="Your Logo"></a>

如您所见，有一个双引号，还添加了一个标准链接。


    <!--Mobile viewport optimized-->
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
    <div class="container" id="main">
       <div class="navbar navbar-fixed-top">
           <div class"container">
                <a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
           </div><!--end container-->
       </div><!--navbar-->
    </div><!--end container--></body>

这里你的语法是错误的。你在课堂上引用了两次。应该是

    <!--Mobile viewport optimized-->
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
    <div class="container" id="main">
       <div class="navbar navbar-fixed-top">
           <div class"container">
                <a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
           </div><!--end container-->
       </div><!--navbar-->
    </div><!--end container--></body>

<a class="navbar-brand" href="#"><img src="images/logo.png" alt="Your Logo"></a>

请尝试此操作

您的标记需要如下所示才能获得所需的结果

    <!--Mobile viewport optimized-->
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
    <div class="container" id="main">
       <div class="navbar navbar-fixed-top">
           <div class"container">
                <a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
           </div><!--end container-->
       </div><!--navbar-->
    </div><!--end container--></body>

<div class="navbar navbar-default navbar-fixed-top">
 <div class="navbar-header"><a class="navbar-brand" href="#"><img src="images/logo.png" alt="Your Logo"></a>
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
      </form>
    </div>
</div>

演示：

你检查过源代码了吗..是不是正在加载css..对不起，没有什么比我复制的更容易识别的了，语法是错误的，还有链接上的语法？

    <!--Mobile viewport optimized-->
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!--Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
    <body>
    <div class="container" id="main">
       <div class="navbar navbar-fixed-top">
           <div class"container">
                <a class=""navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
           </div><!--end container-->
       </div><!--navbar-->
    </div><!--end container--></body>