标签: navbar

我想在Twitter Bootstrap 3.1.1中做一个具有指定高度的完整响应式导航栏,其中品牌可以包含图像(徽标)或文本.

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">

                <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="#">
                <img src="http://placehold.it/150x50&text=Logo" alt="">
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS:

body {
    margin-top: 125px;
}

.navbar-fixed-top .nav {
    padding: 15px 0;
}

问题是,在浏览器的窗口大小减小并且菜单折叠后,导航栏将返回其原始高度,徽标图像如下所示:

另一个问题是更改<img src="http://placehold.it/150x50&text=Logo" alt="">为<h3>AppName</h3>使AppName不在中间:

目前它通过设置填充值来居中,但我不知道如何让它独立于它.

有谁能帮我解决这个问题？

问候

编辑:

以下是我想要实现的效果的准备图像: …

我知道要阻止Bootstrap中的主容器位于主体的顶部,并且在导航栏后面,您必须添加填充,如下所示:

<link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

必须在bootstrap.css和bootstrap-responsive.css之间声明填充,以使填充不会在较小的设备上引起问题,从而破坏站点的响应性.

我的问题:

我正在使用从Bootstrap定制下载的combinde bootstrap.css文件,该文件具有响应和正常的css组合成一个文件.

因为它们被合并到一个文件中,这意味着我无法使用我在本问题开头描述的解决方案,而没有将修复程序实际添加到bootstrap.css文件中(我不想在那里添加它,长篇故事) .

所以我在思考而不是放置这些代码(对于较小的设备使用@media修复):

body {  padding-top: 60px; } 
@media (max-width: 979px) { body { padding-top: 0;  } }

进入我自己的css文件(main.css)并将其包含在bootstrap.css之后,在html中,如下所示:

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

你认为这个解决方案是否可以接受？

我看过这篇文章,但作为新用户,我无法评论要求澄清.

我在Bootstrap中使用了合理的导航标签,并且不希望它们在小屏幕上堆叠,因为我只有2个标签.我希望他们能够并排,只需缩小以适应屏幕.这就是我所拥有的:

    <!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="myTab">
  <li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li>
  <li><a href="#reviews" data-toggle="tab">Reviews</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="ratings">This is a rating section</div>
  <div class="tab-pane" id="reviews">This is for reviews. There should be some styling here.</div>
</div>

由于相关帖子建议使用媒体查询,我似乎无法做到这一点.我曾尝试将以下内容设置为仅针对小屏幕:

    @media (max-width: 768px) {
  .nav-justified > li {display: table-cell;}
}

我不确定我做错了什么,所以非常感谢任何帮助.

我正在尝试在Bootstrap 3中创建一个不会崩溃的简单Navbar - 这里没有必要响应,因为我们右边的左侧+按钮上只有一个简单的标题.

我的目标是让所有分辨率的标题+按钮始终显示相同.像这样的东西:

<div class="navbar navbar-fixed-top">

    <form class="navbar-form navbar-right">
        <button class="btn btn-default">Button 1</button>
        <button class="btn btn-default">Button 2</button>
    </form>

    <a class="navbar-brand" href="#">Title Here</a>

</div>

我从文档中尝试了很多组合.而这篇文章概述了如何使用新的.nav头班.我试过复制.nav-header中的元素 - 并尝试重写BS3媒体查询样式.

有没有更简单的方法来使用Navbar而不会崩溃？

我使用默认的Twitter Bootstrap响应导航栏(没有徽标和搜索),但我希望跨越菜单项,占据菜单栏的整个宽度.

这是我现在默认的Bootstrap导航栏(参见---作为空格):

[home | menu item 1 | menu item 2 | menu item 3 | contact------------------------]

和我喜欢的结果(菜单项占据整个宽度):

[--home-- | ---menu item 1--- | ---menu item 2--- | ---menu item 3--- | -contact-]

我希望有人能帮帮忙.

我正在使用Bootstrap的Navbar和Bootsrap的网格来显示一个Navbar,其中的图像紧挨着Navbar.但是,由于某种原因,此Navbar与图像之间存在空白.当我使用firebug来调查空白的位置时,看起来Navbar在其包含内是顶部对齐的.我试图通过使用CSS底部对齐导航栏来解决这个问题,但无济于事.

我怎样才能消除这个空白？

<!-- Top Navigation Bar -->
<div class="row" id="rowTopLinkNavBar">
    <div class="span6 offset3" id="divTopLinkNavBar">
        <div class="navbar" id="topLinkNavBar">
            <div class="navbar-inner" style="font-size: 16px;">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="divider"><a href="#">PROJECTS</a></li>
                    <li class="divider"><a href="#">ABOUT US</a></li>
                    <li class="divider"><a href="#">THE TEAM</a></li>
                    <li class="divider"><a href="#">EVENTS</a></li>
                    <li class="divider"><a href="#">MEETINGS</a></li>
                    <li><a href="#">RESOURCES</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--Background Image-->
<div class="row" id="rowBackgroundImg">
    <div class="span6 offset3" id="backgroundImg">
    <!-- background image is set in CSS -->
    </div>
</div>

以下是我使用CSS解决此问题的绝望尝试:

#backgroundImg
{
    color: #ff0000;
    background-color: #000000;
    /*width: 709px;
    height: 553px;*/ …

带有最新版bootstrap的My Rails 4站点不会在移动设备中崩溃,但如果我在桌面上打开该站点并收缩窗口,它将崩溃.这是我的导航栏的代码:

<div class = "navbar navbar-inverse navbar-static-top">
    <div class = "container">
        <a href = "/" class = "navbar-brand" style="color: white;">Earn And Learn</a>
        <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
        </button>
    <div class = "collapse navbar-collapse navHeaderCollapse">
            <ul class = "nav navbar-nav navbar-right">
            <li id="nav_ach"><a href = "/about/achievements" style="color: white;">Achievements</a></li>
            <li id="nav_faq"><a href = "/about/faq" style="color: white;">FAQ</a></li>
            <li id="nav_test"><a href = "/about/testimonials" style="color: white;">Testimonials</a></li> …

按照TB的例子,我有一个标记如下的导航栏:

<div class="container">
    <div class="navbar">
        <div class="navbar-inner">
                   <!-- nav bar items here -->
        </div>
    </div>
</div>

我希望这能跨越屏幕的整个宽度而没有任何圆角 - 类似于导航栏的静态顶部样式.

我似乎无法在TB中找到如何做到这一点.如果没有办法,我需要什么CSS来覆盖TB而不是破坏响应？

如何在导航栏中创建100%的搜索输入宽度？

该领域的宽度有限:

<nav class="navbar navbar-light navbar-dark bg-inverse">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav 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">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>

  <ul class="nav navbar-nav pull-xs-right">
    <li class="nav-item">
      <form class="form-inline ">
        <input class="form-control" type="text" placeholder="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">User Name</a>
    </li>
  </ul>
</nav>

这是小提琴:

https://jsfiddle.net/Dieselnick/tdoz2o4d/

当我点击iphone中的照片等设备时,如何隐藏状态栏和导航栏？我曾经用过

UIApplication.sharedApplication().setStatusBarHidden(false, withAnimation: UIStatusBarAnimation.Slide)

但它不起作用.

编辑:我想隐藏并显示状态栏和导航栏,而不是永久隐藏它.