Bootstrap 列内的固定或绝对位置答案

【问题标题】：Fixed or Absolute Position inside of a Bootstrap columnBootstrap 列内的固定或绝对位置
【发布时间】：2018-03-22 13:09:31
【问题描述】：

当用户滚动左列时，我希望右列保持绝对定位。我试图模仿我在 stackoverflow 和谷歌上找到的每一个“解决方案”，但大多数都是旧的，没有一个能成功。

这是我的标记：

   <div className="wrapper wrapper-content animated">
          <div className="row">
            <div className="col-lg-4 col-xl-4">
              { this.props.showController ? <ModelChartController handleChange={ this.handleChange } handleSavedUntilRetirementChange={ this.handleSavedUntilRetirementChange } handleSavedAfterRetirementChange={ this.handleSavedAfterRetirementChange }
                                              {...this.state} /> : null }
            </div>
            <div className="col-lg-8 col-xl-8">
              <div className="absolute-wrapper">
                <div className="maintainPosition">
                  <ResponsiveContainer width='100%' aspect={ 21.0 / 9.0 }>
                    <LineChart data={ this.state.data } margin={ { top: 5, right: 30, left: 20, bottom: 5 } }>
                      <XAxis dataKey="Age" />
                      <YAxis dataKey="Total" />
                      <CartesianGrid strokeDasharray="3 3" />
                      <Tooltip/>
                      <Legend />
                      <Line type="monotone" dataKey="Non-Retirement" stroke="#8884d8" />
                      <Line type="monotone" dataKey="Retirement" stroke="#82aeca" />
                      <Line type="monotone" dataKey="Total" stroke="#82ca9d" activeDot={ { r: 8 } } />
                    </LineChart>
                  </ResponsiveContainer>
                </div>
              </div>
            </div>
          </div>
        </div>

这是 CSS

.absolute-wrapper {
   position: relative;
}

@media (min-width: 768px) { 
  .maintainPosition {
      position: absolute;
      top: 0;
  }
}

【问题讨论】：

这是什么语言？它既不是原始 HTML 也不是原始 Bootstrap。这是ReactJS吗？
是的，它是一个 React 组件。

标签： html css twitter-bootstrap reactjs

【解决方案1】：

首先，您不需要 .absolute-wrapper 和 .maintainPosition div 仅用于定位（不确定您是否需要它们用于其他样式）。

两列是“col-lg-4 col-xl-4”（左列）和“col-lg-8 col-xl-8”（右列），在这些列上操作CSS是合适的div。

您需要附加另一个类名，或者为这些 div 分配一个 Id，如下所示：

附加类名：

<div className="col-lg-4 col-xl-4 leftColumn">
...
</div>

<div className="col-lg-8 col-xl-8 rightColumn">
...
</div>

类的 CSS：

.leftColumn {}
.rightColumn {
 position: absolute;
 right: 0;
 top: 0;
}

添加 ID：

<div className="col-lg-4 col-xl-4" id="leftColumn">
...
</div>

<div className="col-lg-8 col-xl-8" id="rightColumn">
...
</div>

ID 的 CSS：

#leftColumn {}
#rightColumn {
 position: absolute;
 right: 0;
 top: 0;
}

如果这不能解决您正在寻找的问题，请尝试使用position: fixed;（相对于视口）而不是position: absolute;（相对于父级）。这很详细地解释了事情：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

【讨论】：