Question

我有一个html文件如下

<html>
<head>
    <title>Sidebar</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <link rel="stylesheet" href="sidebar.scss">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            // Open navbarSide when button is clicked
            $('#navbarSideButton').on('click', function () {
                $('#navbarSide').addClass('reveal');
                $('.overlay').show();
            });

            // Close navbarSide when the outside of menu is clicked
            $('.overlay').on('click', function () {
                $('#navbarSide').removeClass('reveal');
                $('.overlay').hide();
            });               
        });
    </script>
</head>
<body>
    <nav class="navbar navbar-light navbar-static bg-faded" role="navigation">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="nav navbar-nav">
            <!-- insert more nav-items if you so choose -->
            <button class="navbar-toggler pull-xs-left" id="navbarSideButton" type="button">
                &#9776;
            </button>
        </ul>
        <div class="overlay"></div>
        <ul class="navbar-side" id="navbarSide">
            <li class="navbar-side-item">
                <a href="#" class="side-link">Signup</a>
            </li>
            <!-- insert more side-items if you so choose -->
        </ul>
        <!-- navbar-side will go here -->
    </nav>
</body>       
</html>

在sidebar.scss中，我有以下代码，有助于侧边栏过渡。

.navbar-side {
    height: 100%;
    width: 25%;
    position: fixed;
    top: 0;
    right: 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid #ccc;
    background-color: #f7f7f9;
    overflow-y: scroll;
    z-index: 1000;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: 300ms ease;
    transition: 300ms ease;
  }
  .navbar-side-item {
    padding: 1.5rem 0;
    margin: 0;
    border-bottom: 2px solid #ccc;
    height: 5rem;
  }

  .side-link {
    padding-left: 2rem;
  }
  .reveal {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transition: 300ms ease;
    transition: 300ms ease;
  }
  .overlay {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    background-color: #ccc;
    opacity: 0.6;
    z-index: 990;
  }
  .navbar-side {
    // other code omitted
  @include media-breakpoint-up(xs) { width: 85%; } // Small
  @include media-breakpoint-up(sm) { width: 50%; } // Medium
  @include media-breakpoint-up(md) { width: 25%; } // Large
}

现在当我运行这个时，我正在将侧边栏转移到右侧。但是我需要把它改成左边。怎么做？我试过让左右属性为零。但这没有帮助。

将侧栏转换为左侧而不是右侧

0 个答案: