导航栏和文本未正确对齐
[英]Navbar and text not properly aligning
问题描述
I am trying to set a fixed navbar that has a scrolling effect. 
我正在尝试设置具有滚动效果的固定导航栏。 Logo, links are on the left hand side and the sign up and log in are aligned on the right hand sign with icon. 徽标，链接在左侧，注册和登录在带有图标的右侧标志上对齐。 when I try to run the code, its not looking like it suppose to. 当我尝试运行代码时，它看起来不像它预期的那样。 I've tried a few ideas and looked up every idea and template design and used plenty of references and I am still stuck. 我尝试了一些想法，并查阅了每个想法和模板设计，并使用了大量参考资料，但我仍然感到困惑。
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <title> Kappa Delta Rho - Psi Beta </title> </head> <body> <!-- Fixed Navigation --> <nav class="navbar fixed-top navbar-dark" style=" background-color: #00008B"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> KDR LOGO </a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#"> Welcome </a></li> <li><a href="#"> About </a></li> <li><a href="#"> History </a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </nav> <!-- End of Fixed Navigation --> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html>
1 个解决方案
解决方案1
0 2018-05-27 01:34:49
Try remove fixed-top. 尝试卸下固定顶盖。
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <title> Kappa Delta Rho - Psi Beta </title> </head> <body> <!-- Fixed Navigation --> <nav class="navbar navbar-dark" style=" background-color: #00008B"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> KDR LOGO </a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#"> Welcome </a></li> <li><a href="#"> About </a></li> <li><a href="#"> History </a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </nav> <!-- End of Fixed Navigation --> <br><br><br><br><br><br><br><br><br><br><br> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
<div>在导航栏中无法正确对齐 - <div> in navbar not aligning properly
在Navbar中垂直对齐文本 - Vertically Aligning Text In Navbar
导航栏中文本右边的对齐按钮 - Aligning button to the right of text in navbar
文本与bootstrap的navbar-text pull-right无法正确对齐 - Text not aligning properly with bootstrap's navbar-text pull-right
图片和文字无法正确对齐 - Images and text not aligning properly
HTML文字无法正确对齐 - HTML text not aligning properly
引导导航栏项目在较小的屏幕上无法正确对齐 - bootstrap navbar items not aligning properly on smaller screens
HTML li无法正确对齐文本 - HTML li not aligning text properly
相对于glyphicon在导航栏中居中对齐文本 - center aligning text in navbar with respect to glyphicon
HTML 文本和图像未正确对齐 - HTML Text & Images Not Aligning Properly
相关标签