搜索glyphicon没有正确设置

enter image description here 我有以下的html代码，它给了我一个像附加屏幕截图的页面。我想将搜索图形与搜索框一起固定在右端角落。
代码在这里：搜索glyphicon没有正确设置

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap 101 Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 

    <link href="../css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    </head> 

    <body> 
    <nav class="navbar navbar-default" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Hello World</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Welcome</a></li> 
     <li><a href="#">Login</a></li> 
     <li><a href="#">Signup</a></li> 
     <li> 

    <form class="navbar-form" role="search"> <li> 
     <input type="text" class="form-control" placeholder="Search"></li> 
     <li> 
     <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button></li> 

    </form> 
    <li> 
    </ul> 

    </div><!-- /.navbar-collapse --> 
</nav> 
    <form> 
     <fieldset class='textbox' style="padding:10px"> 
        <input style="margin-top: 8px" type="text" placeholder="Username" /><br/> 
        <input style="margin-top: 8px" type="password" placeholder="Passsword" /><br/><br/> 
        <input class="btn btn-primary" name="commit" type="submit" value="Log In" /> 
       </fieldset> 
      </form> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="../js/bootstrap.min.js"></script> 

    </body> 
</html>

有人可以帮助解决这个？

谢谢 enter image description here

来源

2013-10-29 Smitha

请发布前审核您的文章。您的html格式不正确。有了这么多的代码http://jsfiddle.net/可能是一个很好的选择，这也使得其他人更容易帮助你。 –

谢谢。当然，会照顾它。 – Smitha

使用form-group ..

<form class="navbar-form navbar-right" role="search"> 
     <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
</form>

演示：http://bootply.com/78702

来源

2013-10-29 14:10:41 ZimSystem

这可以解决Chrome中的问题，但iOS模拟器将其显示为附加的屏幕截图。 – Smitha

搜索glyphicon没有正确设置

回答

相关问题