Feste oder absolute Position innerhalb einer Bootstrap-Spalte

Question

Ich möchte, dass die rechte Spalte absolut positioniert bleibt, während der Benutzer die linke Spalte scrollt. Ich habe versucht, jede "Lösung" nachzuahmen, die ich auf Stackoverflow und Google gefunden habe, aber die Mehrheit ist alt und keiner hat es geschafft.

Hier ist mein Markup:

<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> 

Hier ist die CSS

.absolute-wrapper { 
    position: relative; 
} 

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

Answer 1

Zuerst Sie die .absolute-Wrapper und .maintainPosition divs nicht brauchen nur für die Positionierung (nicht sicher, ob Sie brauchen sie für andere Stile).

Die 2 Spalten sind "col-lg-4 col-xl-4" (linke Spalte) und "col-lg-8 col-xl-8" (rechte Spalte) und es wäre richtig, CSS zu betreiben diese divs.

Sie benötigen einen neuen Klassennamen entweder anhängen oder eine ID zu dieser divs zuordnen wie folgt:

Anfügen Klassenname:

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

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

CSS für Klassen:

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

Id hinzufügen:

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

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

CSS für Ids:

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

Wenn das die Lösung ist nicht das, was Sie suchen, versuchen position: fixed; (bezogen auf das Ansichtsfenster) anstelle von position: absolute; (bezogen auf die Eltern). Dies erklärt Dinge sehr detailliert: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/