引導列內的固定或絕對位置

我希望在用戶滾動左列時讓右列保持絕對定位。我試圖模仿我在stackoverflow和google上找到的每個「解決方案」，但大多數都是老的，沒有任何技巧。引導列內的固定或絕對位置

這裏是我的標記：

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

來源

2017-10-11 Dylan Pearson

這是什麼語言？它既不是原始的HTML，也不是原始的Bootstrap。這是'ReactJS'嗎？ –

是的，它是一個React組件。 –

首先，你不需要.absolute，包裝和.maintainPosition的div只是定位（不知道你是否需要他們爲其他風格）。這兩列是「col-lg-4 col-xl-4」（左欄）和「col-lg-8 col-xl-8」（右欄），因此在CSS上運行CSS是合適的。這些div。

您需要可以追加其他類名或ID分配給這些div像這樣：

追加類別名稱：

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

Add Id：

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

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

CSS的IDS：

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

如果不解決，你在找什麼，請嘗試使用position: fixed;（相對於視），而不是position: absolute;（相對於父）。這很詳細地解釋了這些事情：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

來源

2017-10-11 02:31:52

引導列內的固定或絕對位置

回答

相關問題