"na-6ren">
gpt4 book ai didi

css - Bootstrap 3 : collapse button not shown on small screens

转载 作者:太空宇宙 更新时间:2023-11-04 13:21:04 24 4
gpt4 key购买 nike

我正在尝试构建一个导航栏,它在小屏幕上使用 Bootstrap 的折叠功能。这是我的导航栏的代码:

%nav{:class => "navbar navbar-default", :id => "nav_inicio", :role =>"navigation"}
.container-fluid
/Brand and toggle get grouped for better mobile display
.col-lg-2.col-xs-1
.col-lg-2.navbar-header
%button{:class => "navbar-toggle", "data-toggle" => "collapse", "data-target" => "#navbar-collapse"}
%span.sr-only
Toggle navigation
%span.icon-bar
%span.icon-bar
%span.icon-bar

/Collect the nav links, forms, and other content for toggling
.collapse.navbar-collapse.navbar-right#navbar-collapse
%ul.nav.navbar-nav
- if usuario_signed_in?
%li.text-center
= link_to :controller => "/ldi", :action => "new" do
Recomendar lugar
%li.text-center
= link_to "#" do
Mis lugares recomendados
%li.text-center
= link_to "#" do
Mis lugares valorados
%li.text-center
= link_to "#" do
Mis comentarios
%li.divider.nav-divider
%li.active.text-center
= link_to :edit_usuario_registration do
= current_usuario.nombre.upcase
%li.text-center
= link_to :destroy_usuario_session, :method => 'DELETE' do
Salir
- else
%li.active.text-center
= link_to :new_usuario_session do
Entrar
%li.text-center
= link_to :new_usuario_registration do
Registrar

当我在我的笔记本电脑上缩小 Chrome 窗口时,它工作正常(显示折叠按钮而不是导航栏导航),但该按钮既不显示在我的移动浏览器上,也不显示在 Chrome 的模拟工具上。

如何修复?

最佳答案

你不见了

<meta name="viewport" content="width=device-width, initial-scale=1">

在你的<head> ,这会影响视口(viewport)宽度的确定方式,从而影响导航栏的 @media查询。

更多信息:

关于css - Bootstrap 3 : collapse button not shown on small screens,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24070914/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com