标签: navbar

jQuery Mobile导航栏中每行超过5个项目

我没有成功地查找变量来更改导航栏中单行中的最大项目数.

我刚开始使用jQuery Mobile,尝试创建一个包含大约7个单字母项目的导航栏.当存在超过5个项目时,导航栏会自动换行,这对我的项目来说是不可取的.

任何人都可以指出我在代码或css中控制这种行为吗？

mobile jquery navbar jquery-mobile

lys*_*ing

lucky-day

24
推荐指数

3
解决办法

2万
查看次数

Bootstrap 3中响应式导航栏的问题

我在Bootstrap的最后一个版本中使用响应式导航栏没有问题,但我无法使版本3工作.切换按钮显示正常,但一切都消失了,但品牌,但按钮不响应点击.(http://getbootstrap.com/components/#navbar-responsive)任何帮助将不胜感激!这是迄今为止的代码:

<!DOCTYPE html>
<html>
<html lang="en">

    <head>
    <title>Hello World</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/bootstrap.min.js"></script>
        <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    </head>

    <body>
        <section>   
            <div class="navbar navbar-fixed-top">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href= "#" class="navbar-brand">Brand Name</a>
                <div class="nav-collapse navbar-responsive-collapse collapse">
                    <ul class="nav navbar-nav pull-right">
                        <li class="active "><a href="#">Home</a></li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                    </ul>   
                </div>  
            </div>
        </section>

Run Code Online (Sandbox Code Playgroud)

navbar twitter-bootstrap twitter-bootstrap-3

use*_*858

2013 08-06

24
推荐指数

1
解决办法

8万
查看次数

在bootstrap下拉元素上使用intro.js

我无法弄清楚如何在下拉元素上使用intro.js.

我发现了一个类似的问题没有答案:IntroJS Bootstrap菜单不起作用

如果要重现错误,请按照下列步骤操作:

http://recherche.utilitaire.melard.fr/#/carto

你必须点击"Aide"(右上角的绿色按钮),第二步就会出现问题.关于改变事件,我这样做:

$scope.ChangeEvent = function (e) { 
    if (e.id === 'step2') {
        document.getElementById('step1').click();
    } 
    console.log("Change Event called"); 
};

Run Code Online (Sandbox Code Playgroud)

在调试时,一切都像魅力一样工作,直到该函数结束:_showElement之后,我迷失在JQuery事件中,并且关闭了下拉列表......

如果你想重现,只需在_showElement函数的末尾添加一个断点,你就会理解我的意思......

javascript jquery navbar twitter-bootstrap drop-down-menu

Ale*_*ard

2017 05-23

23
推荐指数

2
解决办法

4011
查看次数

Flexbox - 在同一条线上向左和向右对齐

情况:

我有一个简单的导航栏,我正在Flexbox中构建.我想将一个项目向左浮动,并将其他项目固定在右侧.

例:

<nav>
  <ul class="primary-nav">
    <li><a href="#" id="item1">ListItem1</a></li>
    <li><a href="#" id="item2">ListItem2</a></li>
    <li><a href="#" id="item3">ListItem3</a></li>
    <li><a href="#" id="item4">ListItem4</a></li>
  </ul>
</nav>

Run Code Online (Sandbox Code Playgroud)

问题

通常答案只涉及左右浮动项目,但据推测,在Flexbox中使用Floats是不好的.我正在考虑使用justify-content并使用flex-start和flex-end,但这样做并不是很好.

我尝试将flex-start应用于第一个项目,然后将flex-end应用于其他项目但是效果不佳.

喜欢如此:

.primary-nav #item1 {
  justify-content: flex-start;
}

.primary-nav #item2 {
  justify-content: flex-end;
}

.primary-nav #item3 {
   justify-content: flex-end; 
}

.primary-nav #item4 {
    justify-content: flex-end;    
}

Run Code Online (Sandbox Code Playgroud)

赞赏并感谢任何拥有Flexbox技能的人,并且可以帮助我了解处理这种情况的正确方法.:)

html css navbar flexbox

Nic*_*eda

lucky-day

23
推荐指数

3
解决办法

2万
查看次数

如何在Angular 5的ngx-bootstrap中使用Bootstrap导航栏？

ngx-bootstrap组件列表中不存在Bootstrap导航栏.请帮我实现它.

navbar ngx-bootstrap angular

Hos*_*jan

2018 10-25

23
推荐指数

1
解决办法

2万
查看次数

如何更改链接颜色(Bootstrap)

在此输入图像描述

<div class="collapse navbar-collapse">
                    <ul class="nav pull-right">
                        <li class="active"><a href="#">? ???</a></li>
                        <li><a href="#">??? ??? ????????</a></li>
                        <li><a href="#">????</a></li>
                        <li><a href="#">????????</a></li>
                    </ul>

Run Code Online (Sandbox Code Playgroud)

我是Bootstrap的新手.这里我指出了3个班级.我至少有3个.css文件:styles.css,flat-ui.css,bootstrap.css.我不知道如何更改这些链接颜色.

colors hyperlink navbar twitter-bootstrap

ani*_*dis

2014 07-08

22
推荐指数

3
解决办法

10万
查看次数

无法在Angular中的Bootstrap 4中切换Navbar

为什么我不能在使用bootstrap 4在角度4中调整大小到移动屏幕时切换导航栏.我将它包含在脚本和样式的角度cli中,来自bootstrap的节点模块.我的代码中是否缺少某些内容？请检查下面.有什么不对？请帮忙

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Dashboard</a>
  <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <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="#">Settings</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Help</a>
      </li>
    </ul>
    <form class="form-inline mt-2 mt-md-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Run Code Online (Sandbox Code Playgroud)

.angular-cli.json

 "styles": …

Run Code Online (Sandbox Code Playgroud)

togglebutton navbar twitter-bootstrap bootstrap-4 angular

Jos*_*eph

2017 08-30

22
推荐指数

4
解决办法

2万
查看次数

Bootstrap 3 - 如何最大化导航栏内的输入宽度

现在我有一个看起来像这样的导航栏:http: //bootply.com/78239

我想最大化"搜索"文本输入的宽度,而不创建换行符(即"清除"链接将与"关于"链接紧密).

我只有css和网页设计的基本经验.我读了一些关于" overflow: hidden"技巧的内容,但是当目标元素右侧有更多元素时,我不明白如何使用它.

谢谢

编辑:

部分解决方案可以是为每种情况"手动"设置宽度,例如http://bootply.com/78247:

@media (max-width: 767px) {
  #searchbar > .navbar-form {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #searchbar > .navbar-form {
    width: 205px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #searchbar > .navbar-form {
    width: 425px;
  }
}

@media (min-width: 1200px) {
  #searchbar > .navbar-form {
    width: 625px;
  }
}

Run Code Online (Sandbox Code Playgroud)

但是当菜单的文本是"动态的"时(例如,包含"Hello username"),此解决方案将不起作用.

我想如果你假设菜单文本的宽度有限制,这不是一个大问题 - 手动计算/测试这些宽度真的很烦人.我只是想知道是否有一种简洁的方法可以自动完成.

html css html-input navbar twitter-bootstrap-3

Ore*_*ren

2013 09-01

21
推荐指数

1
解决办法

4万
查看次数

bootstrap navbar-static-top菜单在两行中断

我遇到了bootstrap导航栏的问题.

我使用navbar-static-top制作菜单 - 起初它一切都很好.当菜单被扩展并且添加了少量项目,并且现在具有之前要折叠的宽度时,它将分散成两行看起来很糟糕.在CSS bootstrap'a深入挖掘,但没有太大的成功.请帮帮忙,怎么来这里？

目前看起来如下所示: 在此输入图像描述

导航条代码:

<div class="navbar-wrapper">
  <div class="container">

    <div class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <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>
          <a class="bright-logo-text navbar-brand" href="index.html">Clipboard Stripper</a>
        </div>

        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Features<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="features.html">Features</a></li>
                <li><a href="screenshots.html">Screenshots</a></li>
                <li class="active"><a href="usage.html">Usage</a></li>
              </ul>
            </li>


            <li><a href="features.html">Features</a></li>
            <li><a href="screenshots.html">Screenshots</a></li>
            <!--li class="active"><a href="usage.html">Usage</a></li-->
            <li><a href="download.html">Download</a></li>
            <li><a href="purchase.html">Purchase</a></li>
            <!--li class="dropdown"> …

Run Code Online (Sandbox Code Playgroud)

css navbar twitter-bootstrap twitter-bootstrap-3

Ber*_*obi

2014 03-06

21
推荐指数

2
解决办法

2万
查看次数