Bootstrap 图标栏未显示

bnl4lu3b  于 2023-06-04  发布在  Bootstrap
关注(0)|答案(3)|浏览(228)

调整浏览器大小时,Bootstrap导航栏菜单中的图标栏不显示:
http://jsbin.com/ixAqinA/1/

<section class="container">
    <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>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/">
        brand
      </a>
    </div>
    </section>

你可以看到JSBin的例子:http://jsbin.com/ixAqinA/1/

7xllpg7q

7xllpg7q1#

你得把它包在里面

<nav class="navbar navbar-default" role="navigation"></nav>
ffdz8vbo

ffdz8vbo2#

我也遇到过类似的问题,但由于Bootstrap的变化,这个解决方案对我不起作用。
对于Bootstrap 3.1.1,我需要以下样式来在固定在顶部的自定义彩色导航栏上显示图标栏(因此.navbar-default不起作用)

.navbar-toggle .icon-bar{ background-color: #fff;}

只需将#fff更改为您想要显示的颜色。

f3temu5u

f3temu5u3#

Bootstrap 4不再使用.icon-bar。在那里,它必须这样做:

<button class="navbar-toggler navbar-toggler-right" 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>

有关详细信息,请查看heredocumentation of Bootstrap 4

相关问题