Question

我曾在我的网站中为所有设备切换导航栏作为菜单。当我使用此代码时，它没有显示可折叠导航栏的3图标。请任何人在我的代码中找到错误

public partial class RatioKeeper : UserControl
{
    public static readonly DependencyProperty VerticalAspectProperty = DependencyProperty.Register(
        "VerticalAspect", typeof(double), typeof(RatioKeeper), new PropertyMetadata(1d));

    public static readonly DependencyProperty HorizontalAspectProperty = DependencyProperty.Register(
        "HorizontalAspect", typeof(double), typeof(RatioKeeper), new PropertyMetadata(1d));

    public double HorizontalAspect
    {
        get { return (double) GetValue(HorizontalAspectProperty); }
        set { SetValue(HorizontalAspectProperty, value); }
    }

    public double VerticalAspect
    {
        get { return (double) GetValue(VerticalAspectProperty); }
        set { SetValue(VerticalAspectProperty, value); }
    }
    public RatioKeeper()
    {
        InitializeComponent();
    }

    //arrangeBounds provides size of a host.
    protected override Size ArrangeOverride(Size arrangeBounds)
    {
        //Calculation of a content size that wont exceed host's size and will be of the desired ratio at the same time
        var horizontalPart = arrangeBounds.Width / HorizontalAspect;
        var verticalPart = arrangeBounds.Height / VerticalAspect;
        var minPart = Math.Min(horizontalPart, verticalPart);
        var size = new Size(minPart * HorizontalAspect, minPart * VerticalAspect);
        //apply size to wrapped content
        base.ArrangeOverride(size);
        //return size to host
        return size;
    }
}

Answer 1

您可以根据您的要求尝试以下示例

.navbar-toggle {
  border: none;
  background: transparent !important;

  &:hover {
    background: transparent !important;
  }

  .icon-bar {
    width: 22px;
    transition: all 0.2s;
  }
  .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);
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
  <!-- Static navbar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <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>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
       </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>
</div> <!-- /container -->

Answer 2

对于可折叠导航栏，请改为使用此选项：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <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>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

</body>
</html>

更改屏幕大小以查看效果。 https://jsfiddle.net/43rm9emw/

导航栏切换未显示

2 个答案: