元标记正在影响动画引导图标栏未显示，但当我删除时，它没有隐藏侧栏在移动respoinsive [英] Meta tag is affecting the animated bootstrap icon-bar not show, but when I remove, it didn't hide the side bar when on mobile respoinsive

问题描述

javascript - 元标记正在影响动画引导图标栏未显示，但是当我删除时，它在移动设备上没有隐藏侧边栏 - Stack Overflow [ ^ ]



嗨我有问题在我的主页面显示图标栏，如下图所示：



我尝试过：



顶部导航栏：

javascript - meta tag is affecting the animated bootstrap icon-bar not show, but when I remove, it didn't hide the side bar when on mobile respoinsive - Stack Overflow[^]

Hi I have problem show the icon-bar in my main page as show in the following below:

What I have tried:

Top nav bar:

<nav class=" navbar navbar-default navbar-fixed-top my-class" role="navigation">
    <div class="container-fluid">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" id="sidebarCollapse">
            <span class="icon-bar top-bar"></span> 
            <span class="icon-bar middle-bar"></span> 
            <span class="icon-bar bottom-bar"></span>
        </button>
        <a class="navbar-brand" href="#">{Project name}</a>
        <div id="navbar" class="navbar-collapse collapse"></div>
    </div>
</nav>

css js和metal tag：

css js and metal tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Dashboard by Bootstrapious.com</title></meta>
<meta name="description" content=""></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta name="robots" content="all,follow"></meta>

<title>Collapsible sidebar using Bootstrap 3</title>

<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css"></link>
<!-- Font Awesome CSS--> 
<link rel="stylesheet" href="resources/vendor/font-awesome/css/font-awesome.min.css"></link>
<!-- Fontastic Custom icon font--> 
<link rel="stylesheet" href="resources/css/fontastic.css"></link>
<!-- Google fonts - Roboto --> 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"></link>
<!-- jQuery Circle--> 
<link rel="stylesheet" href="resources/css/grasp_mobile_progress_circle-1.0.0.min.css"></link>
<!-- Custom Scrollbar -->
<link rel="stylesheet" href="resources/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

CSS：

CSS:

@media only screen and (max-width: 1023px) {
  .navbar-toggle .icon-bar{ background-color: #fff;}  
  
  .my-class{
    visibility: visible;
  }

  .navbar {
    background-color: #34454e;
  }

  .my-class.navbar-default .navbar-brand {
    font-family: monaco, Consolas, "Lucida Console", monospace;
    font-size: 24px;
    font-weight: 500;
    color: #dcdcdc;
  }

  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-collapse.collapse.in {
    display: block !important;
  }
  .navbar-header .collapse,
  .navbar-toggle {
    display: block !important;
  }

  .navbar-toggle {
    border: none;
    //background: transparent !important;
    border: 0;
    float: left;
    padding: 18px;
    margin: 0;
    border-radius: 0;
    background-color: #e2ae15;
    cursor: pointer;
    color: #ffffff;*/

    &:hover {
    /*background: transparent !important;*/
    background: #e2ae15 !important;
  }

    .icon-bar {
      width: 22px;
      transition: all 0.2s ease-in-out;
    }
    .top-bar {
      transform: rotate(45deg);
      transform-origin: 10% 10%;
    }
    .middle-bar {
      opacity: 0;
    }
    .bottom-bar {
      transform: rotate(-45deg);
      transform-origin: 10% 90%;
    }

   &.collapsed {
      .top-bar {
        transform: rotate(0);
      }
      .middle-bar {
        opacity: 1;
      }
      .bottom-bar {
        transform: rotate(0);
      }
    }
  }

  .my-class.navbar-default .navbar-toggle,
  .my-class.navbar-default .navbar-toggle:hover {
    background-color: red;
  }

  .my-class .navbar-toggle.collapsed,
  .my-class .navbar-toggle.collapsed:hover {
    background-color: orange;
  }
}

@media only screen and (min-width: 1024px)
{
  .my-class, #navba{
    visibility: hidden;
  }
}

我知道问题出在哪里，但当我删除此链接时：

I have know where is the problem but when i remove this link:

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

图标栏显示但侧边栏未隐藏在移动设备中。有没有什么方法可以在移动屏幕上显示和隐藏侧边栏的引导图标栏。很抱歉，如果我无法在jsfiddle上发布，因为css和js上有很多链接。



任何人都可以帮助我，谢谢。

the the icon bar show but the side bar does not hide in mobile. Is there any ways that bootstrap icon-bar will able to show and hide the sidebar when on mobile screen. Sorry if i unable to post it on jsfiddle because there a lot of link on css and js.

Could anyone help me on this, thanks.

推荐答案

你发布的CSS不清楚，可能是该网站上的自动格式化了一些语法。例如，没有.navbar-toggle的结束标签{



无论如何，标题部分有几个问题



1.元标记应为

The CSS you posted are not clear, could be the auto formatting on that site chew up some of the syntax. For instance there no closing tag for .navbar-toggle {

Anyway, there are couple of issues with the header section

1. the meta tag should be

<meta name="description" content="" />

而不是

and not

<meta name="description" content=""></meta>

2。与CSS链接相同。它应该是

2. same with the CSS link. It should be

<link rel="stylesheet" href="style.css" />

而不是

and not

<link rel="stylesheet" href="style.css"></link>

如果你可以提供究竟是什么问题的截图。

It would be great if you can provide a screenshot of what exactly is the problem.

这篇关于元标记正在影响动画引导图标栏未显示，但当我删除时，它没有隐藏侧栏在移动respoinsive的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！