부트 스트랩의 Navbar가 asp.net에서 제대로 작동하지 않습니다.

-1

내 asp.net 페이지에서 간단한 부트 스트랩 Navbar를 구현하려고합니다. 예제가 많이 있지만 html 페이지에서만 완벽하게 작동하지만 asp.net 페이지에서 제대로 작동하지 않습니다.부트 스트랩의 Navbar가 asp.net에서 제대로 작동하지 않습니다.

난 항상 오류

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 

    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <title>Example of Bootstrap 3 Static Navbar Extended</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style type="text/css"> 
     .bs-example { 
      margin: 20px; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div class="bs-example"> 
    <nav class="navbar navbar-default"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="#" class="navbar-brand">Brand</a> 
     </div> 
     <!-- Collection of nav links, forms, and other content for toggling --> 
     <div id="navbarCollapse" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Profile</a></li> 
       <li class="dropdown"> 
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Inbox</a></li> 
         <li><a href="#">Drafts</a></li> 
         <li><a href="#">Sent Items</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Trash</a></li> 
        </ul> 
       </li> 
      </ul> 
      <form class="navbar-form navbar-left"> 
       <div class="input-group"> 
        <input type="text" class="form-control" placeholder="Search"> 
        <span class="input-group-btn"> 
         <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> 
        </span> 
       </div> 
      </form> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Login</a></li> 
      </ul> 
     </div> 
    </nav> 
</div> 
    </form> 
</body> 
</html>

내 asp.net 페이지 출력을 제공합니다 .. 여기에 내 사진을 게시 할 수 없습니다 보인다

https://ibb.co/eY85n6

내 HTML 페이지 코드는 여기

<!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>Example of Bootstrap 3 Static Navbar Extended</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style type="text/css"> 
     .bs-example { 
      margin: 20px; 
     } 
    </style> 
</head> 
<body> 
    <div class="bs-example"> 
     <nav class="navbar navbar-default"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a href="#" class="navbar-brand">Brand</a> 
      </div> 
      <!-- Collection of nav links, forms, and other content for toggling --> 
      <div id="navbarCollapse" class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Profile</a></li> 
        <li class="dropdown"> 
         <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Inbox</a></li> 
          <li><a href="#">Drafts</a></li> 
          <li><a href="#">Sent Items</a></li> 
          <li class="divider"></li> 
          <li><a href="#">Trash</a></li> 
         </ul> 
        </li> 
       </ul> 
       <form class="navbar-form navbar-left"> 
        <div class="input-group"> 
         <input type="text" class="form-control" placeholder="Search"> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> 
         </span> 
        </div> 
       </form> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">Login</a></li> 
       </ul> 
      </div> 
     </nav> 
    </div> 
</body> 
</html>

내 HTML 페이지 출력이 완벽하게보여줍니다아웃 풋은 .. (asp.net의 로그인 링크에서 아래로 밀어) 내가 완전히 다른 일을하고 있는지 https://ibb.co/hFizEm

잘못

출처

2017-12-23 Ramana Maddineni

콘솔의 오류는 무엇입니까? – Gibolt

두 출력을 모두 확인하십시오 asp.net : https://ibb.co/eY85n6 html 출력 : https://ibb.co/hFizEm –

문제는 당신이이 개 형태, 단지 하나의 몸 안에 다른 하나가있다 수색. 두 번째 양식을 div로 변경하십시오.

<!--change this form to div--> 
<form class="navbar-form navbar-left"> 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Search"> 
     <span class="input-group-btn"> 
      <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> 
     </span> 
    </div> 
</form>

이것은 나중에 다른 문제로 이어질 수 있지만 스타일 문제를 해결해야합니다.

출처

2017-12-23 04:49:31 wazz

부트 스트랩의 Navbar가 asp.net에서 제대로 작동하지 않습니다.

답변

관련 문제