Css 防止导航条在768px处断裂_Css_Navbar

Css 防止导航条在768px处断裂

css

Css 防止导航条在768px处断裂,css,navbar,Css,Navbar,我正在构建一个导航栏，它使用jasny引导菜单和引导默认值。我遇到的问题是，我不希望导航栏在768px处开始崩溃。我知道你可以在CSS中改变这一点，但我不知道如何改变，甚至在网上搜索并尝试这些建议我希望搜索保持隐藏在平板电脑的导航栏中，并且只在更大的桌面上显示。在html中，我在小屏幕上显示jasny bootstrap离开画布菜单，在大屏幕上显示隐藏菜单，反之亦然，使用bootstrap默认导航栏。我想能够做到这一点，只是CSS单独这里是新的编码员。谢谢你的帮助这是我的密码： <!

我正在构建一个导航栏，它使用jasny引导菜单和引导默认值。我遇到的问题是，我不希望导航栏在768px处开始崩溃。我知道你可以在CSS中改变这一点，但我不知道如何改变，甚至在网上搜索并尝试这些建议

我希望搜索保持隐藏在平板电脑的导航栏中，并且只在更大的桌面上显示。在html中，我在小屏幕上显示jasny bootstrap离开画布菜单，在大屏幕上显示隐藏菜单，反之亦然，使用bootstrap默认导航栏。我想能够做到这一点，只是CSS单独

这里是新的编码员。谢谢你的帮助

这是我的密码：

<!DOCTYPE html>
<html>
  <head>
    <title>Navigation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/jasny-bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
    <link href="css/custom.css" rel="stylesheet" media="screen">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div id="navbar" class="navbar hidden-xs hidden-sm">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <ul class="nav navbar-nav">
          <li><a href="#">Home <span class="sr-only">(current)</span></a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Practices <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Project Delievery</a></li>
            <li><a href="#">Architecture</a></li>
            <li><a href="#">Business Analysis</a></li>
            <li><a href="#">Development & Support</a></li>
            <li><a href="#">Enterprise Testing</a></li>
            <li><a href="#">Infustructure & Operations</a></li>
          </ul>
        </div>  
      </nav>
    </div>

    <!-- off canvas toggle -->
    <div id="off-canvas-nav" class="off-canvas-nav hidden-md hidden-lg">
      <div class="navbar navbar-default">
        <div class="pull-left">
          <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      </div><!-- /pull-left -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#search-navbar-collapse" aria-expanded="false">
        <i class="fa fa-search fa-lg"></i>
      </button>        
      </div><!-- /navbar -->
    </div><!-- /off-canvas -->

    <!-- search -->
    <div id="search-tool">
    <div class="collapse navbar-collapse" id="search-navbar-collapse">
      <form class="navbar-form" role="search">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for...">
              <span class="input-group-btn">
              <a class="btn btn-default" a href="#" role="button">Search</a>
              <button class="btn btn-default" type="button"><i class="fa fa-search-plus fa-lg"></i></a></button>
          </div><!-- /input-group -->
        </div><!-- /form-group -->
      </form>
    </div><!-- collapse -->
    </div>

    <!-- off canvas menu-->
    <div id="off-canvas-menu">
    <nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
      <ul class="nav navmenu-nav">
        <li><a href="#">Home</a>
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Practices<b class="caret"></b></a>
          <ul class="dropdown-menu navmenu-nav" role="menu">
            <li><a href="#">Project Delivery</a>
            <li><a href="#">Architecture</a>
            <li><a href="#">Business Analysis</a>
            <li><a href="#">Development & Support</a>
            <li><a href="#">Enterprise Testing</a>
            <li><a href="#">Infustructure & Operations</a>
          </ul><!-- /dropdown-menu -->
        <li><a href="#">Document Library</a>
        <li><a href="#">Lists</a>
      </ul><!-- /nav -->
    </nav>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jasny-bootstrap.min.js"></script>
  </body>
</html>

您是否尝试删除CSS中的

@media

规则？我不使用您的特定框架，但会根据大小或其他参数更改CSS属性，而这一个会在屏幕宽度超过768px时更改显示属性。请看一下：您是否尝试删除CSS中的

@media

规则？我不使用您的特定框架，但会根据大小或其他参数更改CSS属性，这一个会在屏幕宽度超过768px时更改显示属性。请看以下内容：

@media (min-width: 768px) {
    .navbar-toggle {
        display: initial;
    }
}

.navbar {
    margin-bottom: 0px;
}
.navbar-default {
    background-color: #006564;
    border: 0px;
    border-radius: 0px;
}
.navbar-default, .navbar-toggle {
    border: 0px;
}
.navbar-default > .pull-left .navbar-toggle .icon-bar {
    border-radius: 0px;
    background-color: #fff;
}
.navbar-toggle {
    margin-left: 15px;
}
.navmenu-default {
    background-color: #006564;
}
.navbar-collapse {
    border: 0px;
    background-color: #006564;
}
.navmenu, .navbar-offcanvas {
    padding-top: 54px;
}
.navmenu-default .navmenu-nav > li > a, .navbar-default .navbar-offcanvas .navmenu-nav > li > a {
    color: #fff;
}
.navmenu-default .navmenu-nav .dropdown-menu, .navbar-default .navbar-offcanvas .navmenu-nav .dropdown-menu {
    background-color: #367d79;
}
.dropdown-menu > li > a {
    padding: 10px 20px;
}
.form-control {
    border-radius: 0px;
}
.fa {
    color: #fff;
}
.navbar-form > .form-group, .input-group, .btn-default {
    border-radius: 0px;
    color: #fff;
    background-color: #367d79;
    border-color: #367d79;
}
.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
    margin-left: 0px;
}