Question

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

我试图通过添加位置来修复它：但是当我这样做时，侧边栏所在的列的大小减小到那里最长的字符串的长度。

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

这是我的代码:(这是一个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%;
}

Stack Snippet

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>

Bootstrap 4 Flexbox侧边栏更薄，使用位置：固定

1 个答案: