Question

查看bootstrap中的大多数示例，我发现侧边栏的{c}为left:250px和margin-left:-250px。

为什么不让left: 0px得到相同的结果？

示例：

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Answer 1

我在one project that used the practice注意到，有各种@media次查询更改了侧边栏，使其具有不同的宽度（因此left和margin-left的不同对应值）窗口大小。

执行此操作的一个功能是，要隐藏侧边栏，可以简单地调用left: 0，并且无论边栏的当前宽度如何，它都会将侧边栏移动到其全宽。这比使用display: none更好，因为它可以动画显示从屏幕上滑落，而不是调用width: 0，因为侧栏在它不会离开屏幕的情况下仍然可见

例如：

$("button").click(function() {
  $(".sidebar, .content").toggleClass("hiddenSidebar");
});

body { margin: 0 }
.content {
  left: 100px;
  position: relative;
  transition: all 0.4s ease 0s;
}
.sidebar {
        width:  100px;
         left:  100px;
  margin-left: -100px;
  height: 500px;
  background: black;
  position: fixed;
  transition: all 0.4s ease 0s;
}
@media (max-width: 767px) {
  .content { left: 50px; }
  .sidebar {
          width:  50px;
           left:  50px;
    margin-left: -50px;
  }
}
.hiddenSidebar { left: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar"></div>
<div class="content">
  <button>Toggle Sidebar!</button>
</div>

为什么大多数侧边栏示例都留下了250和左边距-250？

1 个答案: