css - Bootstrap 4 Flexbox 侧边栏在使用位置 :fixed 时变薄

Question

我正在使用 Bootstrap 4 中的网格系统和 Flexbox 实用程序构建侧边栏。在大多数情况下，我让它工作，除了我想让侧边栏是“静态的”，也就是说，当用户在它旁边的页面上滚动时它不应该移动。

我试图通过添加 position:fixed 来做到这一点，但是当我这样做时，侧边栏所在的列的大小减小到那里最长字符串的长度。

如何使侧边栏保持固定，同时保持列宽？

这是我的代码:(这是一个 React 应用程序，所以“class”被替换为“className”)

父组件:

{ this.state.isLoggedIn ?
   <div className="row h-100">
      <div className="col-2 no-padding-right">
         <Sidebar />
      </div>
      <div className="col-10 no-padding-left">
         <Main />
      </div>
   </div> :
   <Main />
}

侧边栏本身:

<div className="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
                <div className="p-2">
                    Week 11
                </div>
                <div className="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
                <div className="p-2">Current Features</div>
                <div className="p-2">Feature Request</div>
                <div className="p-2">Settings</div>
                <div className="p-2">Billing</div>
                <div className="p-2">Log Out</div>
            </div>

以及相关的 CSS 片段:

.sidebar-left {
    padding-top: 83px;
    position: fixed;
}

谢谢!

Answer 1

将 max-width 应用到 sidebar-left 等于你的 col 有多少。

.sidebar-left {
  max-width: 16.666667%;
}

堆栈片段

body {
  margin: 0;
}

.sidebar-left {
  font: 13px Verdana;
  padding-top: 83px;
  position: fixed;
  background: red;
  max-width: 16.666667%;
  left: 0;
  top: 0;
  overflow: auto;
}

.p-2 {
  word-break: break-word;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="row h-100">
  <div class="col-2 no-padding-right">
    <div class="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
      <div class="p-2">
        Week 11
      </div>
      <div class="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
      <div class="p-2">Current Features</div>
      <div class="p-2">Feature Request</div>
      <div class="p-2">Settings</div>
      <div class="p-2">Billing</div>
      <div class="p-2">Log Out</div>
    </div>
  </div>
  <div class="col-10 no-padding-left">
    <div class="main"></div>
  </div>
</div>