标签: navbar

我知道这可以通过将属性设置为iOS navigationviewcontroller.navigationBar.hidden来实现YES.我在导航控制器中有一个登录视图.在这个视图中,我需要隐藏导航栏,并且已经存在.问题是:当我按下另一个视图时,我需要显示导航栏.

谢谢

我将一些样式应用到twitter bootstrap导航栏,然后意识到我不想在折叠版本上使用这些样式.我首先找了一些应用类来区分折叠和未折叠的条,但我找不到一个.我将尝试使用JS有条件地添加一个类...有更好的方法来做到这一点吗？

我正在使用bootstrap并尝试将搜索表单放在导航栏下拉菜单中,但我发现表单看起来被压扁,因为下拉列表的宽度太小.此外,表单元素不是我想要的.我该如何解决？

我是CSS和网页设计的新手.请帮忙!

目前的布局:

我想要实现的目标:

<header class="navbar navbar-inverse navbar-fixed-top navbar-inverse" role="banner">
  <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>
      <a href="index.html" class="navbar-brand">Brand</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="#">Browse</a></li>
      </ul>
      <ul class="nav navbar-nav">
        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Locate <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <button type="button" class="btn btn-default navbar-btn"><li class="icon-screenshot"></li></button>
                <input type="text" class="form-control" placeholder="Address">
              </div>
              <div class="btn-group">
                <button …

我正在使用bootstrap 3.0并在移动网站上工作.我试图弄清楚当导航栏折叠时如何更改button.navbar-toggle的背景颜色.

基本上我要问的是当导航栏菜单打开时如何在移动设备上显示"按下"状态？

即时通讯使用Twitter bootstrap为我的响应,我希望导航将成为一个按钮,当它在移动设备上观看时,小屏幕显示的按钮,但当我点击它时,它不会滑动显示我的锚点这里是我的代码

<header class="navbar navbar-static-top marginTop">
    <div class=" col-md-6 ">
        <button class="navbar-toggle" type="button" 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>
        <img src="http://localhost/wordpress/wp-content/uploads/2014/03/logo.png" alt="" />
    </div>

    <div class="col-md-6">
        <nav class="collapse navbar-collapse marginTopInNavBar">
            <ul class="nav navbar-nav parentUl text-center floatLeft" >
                <li class="dropdown parentNavLi floatLeft">
                    <a href="#" class="parentNavA floatLeft" id="first">Compare Prices</a>
                    <img src="http://localhost/wordpress/wp-content/uploads/2014/03/shadowNav.png" alt="" />
                </li>

                <li class="dropdown parentNavLi floatLeft">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle parentNavA floatLeft">Buying Guides</a>
                    <img src="http://localhost/wordpress/wp-content/uploads/2014/03/shadowNav.png" alt="" />
                    <ul class="dropdown-menu childUl text-left floatLeft" id="menu1">
                        <li …

有问题的页面位于:http://deancraneproperties.com/rental-property-calculator/

将标题类从navbar-fixed-top更改为navbar-static-top时,会在标题上方创建一个80像素的空白区域.当然,我可以通过将margin-top设置为-80px来解决这个问题,但我想知道是否有人解释为什么会出现这种情况,或者有更好的修复方法.

这是有问题的html:

<header id="header" class="navbar navbar-inverse navbar-fixed-top" role="banner">

先感谢您!

编辑:你们都摇滚!感谢您的快速回复,解释和修复.这是你坚持的简单事情,让你发疯.大声笑.

我想在移动设备上显示的引导菜单中添加一些文本.当浏览器窗口宽度低于媒体查询阈值时,当前3个图标栏显示为菜单右侧的按钮.菜单栏左侧的所有空白区域我都想添加一些文字.无论我到目前为止尝试过什么,都会在普通菜单上显示文字,或者在按钮框内显示文字.谁能建议最好的方法来实现这一目标？

恩.

 <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
<span class="navbar-toggle small text-left">Text Here</span>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="../index.html">Home</a></li>
              <li><a href="../about.html">About</a></li>
              <li><a href="../glass-services.html">Services</a></li>
              <li><a href="../contact.html">Contact</a></li>
            </ul>

          </div>
        </div>
</div>

我有一个带左侧用户欢迎问候语的导航栏,但我想将我的退出功能移到右侧的另一侧.目前它坐在欢迎旁边.关于如何移动它的任何想法？这是我一直在使用的代码.

<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<!--navbar settings-->
           <div class="container-fluid">
            <div class="navbar-header">


<button type="button" class="navbar-toggle collapsed" 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="index.html">Logout</a>-->

                <?php    //echo $_SESSION["staffname"];
            if(isset($_SESSION["staffId"]) && $_SESSION["staffId"] != NULL)
            {        ?> <a class="navbar-brand">
                     Welcome   <?php echo $_SESSION["staffname"];  ?></a>
               <a href="logout.php" class="navbar-brand"><strong>Logout</strong></a>
             <?php
             }
             ?>
            </div>
        </div>
    </nav>

我在Angular 4项目中使用Bootstrap 4和Ng-Bootstrap,

我用这种方式链接了我的angular-cli.json中的que bootstrap.css

 "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "styles.css"
  ],

并在我的app.module中导入了NgbModule,看起来像这样

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我做了一个Navbar从bootstrap网站复制文档并添加了ng-bootstrap的toggle组件(它工作正常)代码看起来像这样

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse …

我有一个导航栏，我想将链接居中。我尝试添加mx-auto和text-center。什么都没用。我的代码在下面吗？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark text-center">
  <div class="container text-center">
    <a class="navbar-brand text-center" href="#"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>