Questions tagged «navbar»

HTML和XML的直接与页面导航有关的部分

10
具有左，中或右对齐项的Bootstrap NavBar
在Bootstrap中，最简单的平台创建导航栏的方法是在左侧显示徽标A，在中央显示菜单项，在右侧显示徽标B。 这是到目前为止我尝试过的方法，最终将它们对齐，以使徽标A位于左侧，菜单项位于徽标旁边，左侧是徽标B。 <div class="navbar navbar-fixed-top navbar-custom "> <div class="container" > <div class="navbar-header"> <button type="button" 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> </button> <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">Menu Item 1</a></li> <li><a href="#contact">Menu Item 2</a></li> <li><a href="#about">Menu Item 3</a></li> …
29
具有徽标的Bootstrap 3导航栏
我想将Bootstrap 3默认导航栏与图像徽标一起使用，而不要使用文字商标。在不引起不同屏幕尺寸问题的情况下，这样做的正确方法是什么？我认为这是一个普遍的要求，但是我还没有看到好的代码示例。除了在所有屏幕尺寸上都可以接受的显示外，关键要求是在较小屏幕上的菜单可折叠性。 我尝试仅将IMG标签放在具有navbar-brand类的A标签内，但这导致菜单在我的android手机上无法正常运行。我还尝试增加导航栏类的高度，但这使事情变得更糟。 顺便说一句，我的徽标图像大于导航栏的高度。
21
Bootstrap 4将导航栏项目向右对齐
如何将导航栏项目右对齐？ 我要登录并在右边注册。但是我尝试的所有方法似乎都无法正常工作。 到目前为止，这是我尝试过的： <div>周围<ul>带有属性：style="float: right" <div>周围<ul>带有属性：style="text-align: right" 在<li>标签上尝试了这两件事 再次尝试了所有这些事情，并!important添加到最后 改变nav-item以nav-right在<li> 添加了一个pull-sm-right类的<li> 添加了一个align-content-end类的<li> 这是我的代码： <div id="app" class="container"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> …
11
响应式引导导航栏中的中心内容
我无法将内容集中在引导导航栏中。我正在使用引导程序3。我已经阅读了许多文章，但是所使用的CSS或方法不适用于我的代码！我真的很沮丧，所以这就像我的最后选择。任何帮助，将不胜感激！ <!DOCTYPE html> <html> <head> <title>Navigation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/style.css" rel="stylesheet" media="screen"> </head> <body> <div class="container"> <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> …
18
在不使用LESS的情况下更改引导导航栏崩溃断点
当前，当浏览器宽度降至768px以下时，导航栏将变为折叠模式。我想将此宽度更改为1000px，所以当浏览器低于1000px时，导航栏将变为折叠模式。我想在不使用LESS的情况下执行此操作，而是在使用手写笔而不是LESS。 我的问题与此问题相同：Bootstrap 3 Navbar折叠 但是，这些问题中的所有答案都说明了如何通过更改LESS变量来做到这一点。我还没有处理过LESS，我正在使用手写笔，所以我想知道如何使用手写笔或其他方法来完成此操作。 谢谢！
12
Bootstrap 3导航栏折叠
是否有任何方法可以增加bootstrap 3导航栏折叠的位置（即，使其在肖像平板电脑上折叠成一个下拉列表）？ 这两个适用于引导程序2，但现在不适用！ 如何使用Twitter引导响应式更改导航栏折叠阈值？ 更改默认的响应式导航栏断点
9
如何在Twitter的bootstrap 2.1.0中使用新的词缀插件？
关于该主题的引导文档使我有些困惑。我想实现类似的行为，例如在文档中带有词缀navbar：navbar位于段落/页面标题下方，向下滚动时，它应该首先滚动直到到达页面顶部，然后固定在那里以便进一步向下滚动。 由于jsFiddle不适用于导航栏概念，因此我以最小的示例设置了单独的使用页面：http : //i08fs1.ira.uka.de/~s_drr/navbar.html 我将其用作导航栏： <div class="navbar affix-top" data-spy="affix" data-offset-top="50"> <div class="navbar-inner"> <div class="container"> <div class="span12"> <a class="brand" href="#">My Brand</a> This is my navbar. </div> </div> <!-- container --> </div> <!-- navbar-inner --> </div> <!-- navbar --> 我想我想data-offset-top将其值设为0（因为该条应“固定”在最顶部”，但如果设置为50，则至少可以看到一些效果。 如果还将javascript代码放在适当的位置： <script> $(document).ready (function (){ $(".navbar").affix (); }); </script> 任何帮助表示赞赏。
9
降低Bootstrap 3.0导航栏的高度
我正在尝试降低用于固定顶部行为的bootstrap 3.0 navbar的高度。在这里我正在使用代码。 的HTML <div class="tnav"> <div class="navbar navbar-fixed-top" role="banner"> <div class="navbar-inner-sm"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <nav class="collapse navbar-collapse" role="navigation"> <ul class="nav navbar-nav pull-right"> <li class="active"> <a href="../getting-started">Getting started</a> </li> <li> <a href="../css">Ext01</a> </li> …
6
Bootstrap 3-禁用导航栏折叠
这是我简单的导航栏： <div class="navbar navbar-fixed-top myfont" role="navigation"> <div class=""> <ul class="nav navbar-nav navbar-left"> <li> <a class="navbar-brand" href="#"> <img src="assets/img/logo.png"/> </a> </li> <li> <button class="btn btn-navbar"> <i class="fa fa-edit"></i> Create </button> </li> </ul> </div> <ul class="nav navbar-nav navbar-right"> <li data-match-route="/"><a href="#/page-one">Login</a></li> <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li> </ul> </div> 我只是想防止这种情况崩溃，因为我不需要它，怎么办？ 我想避免编写30万行CSS来覆盖默认样式。 有什么建议吗？
6
如何在多个页面上重复使用导航栏？
我刚刚完成了home / index.html页面的制作。要将导航栏保持在原处，并在用户单击我的所有页面时将其保留。我是否必须将导航代码复制并粘贴到每个页面的顶部？还是有另一种方法可以使它看起来更干净？ HMTL导航： <nav> <div> <a href="/"> <div id="logo"><img src="image.png" alt="Home"/></div> <div id="headtag"><img src="image.png" alt="Home"/></div> <div id="tagline"><img src="image.png" alt="Home"/></div> </a> </div> <div> <a href="/" class="here">Home</a> <a href="/about.html" >About</a> <a href="/services.html" >Services</a> <a href="/pricing.html" >Pricing</a> <a href="/contact.html" >Contact Us</a> <input id="srchbar" type="search" placeholder="Search"> </div> </nav>
82 html  navbar 
5
导航栏顶部的Twitter-Bootstrap-2徽标图片
有人可以建议我如何将徽标图像放置在导航栏的顶部吗？我的标记： <body> <a href="index.html"> <img src="images/57x57x300.jpg"></a> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> 由于导航栏下方显示了57x57x300.jpg，因此无法正常工作。
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.