使用col- *使用固定在容器中的位置

Question

我正在尝试实现一个设计，其中包含std::once_flag flag; class LifeTrackerHelper { public: template<class T> inline static int SetLongevity(std::unique_ptr<T>& pobj,unsigned int longevity = 0) { return 0; } template<class T> inline static int SetLongevity(unsigned int longevity = 0) { return 0; } }; template<class T> class Singleton { public: inline static T* getInstance() { static std::unique_ptr<T> ptr(new T()); std::call_once(flag,&LifeTrackerHelper::SetLongevity<T>,std::ref(ptr),0); //static int i = LifeTrackerHelper::SetLongevity<T>(ptr); // if call_once is commented and above line uncommented this will work return ptr.get(); } }; class Test { public: void fun() { std::cout<<"Having fun...."<<std::endl; } }; ; int main() { Singleton<Test>::getInstance()->fun(); return 0; } ，其中有两列，一列是container，另一列是col-lg-8，位置固定。

我知道col-lg-4与整个页面相关。 ＆＃34; 我不明白的是：

如何将其设置为affix（它会更多）？

col-lg-4

正如您所看到的，右列比<div class="container"> <div class="row"> <div id="designer" class="col-lg-8"> Content </div> <div class="col-lg-4"> <div class="affix"> Fixed content </div> </div> </div> 多，我试图将其置于container内 - 因此它将以所有内容为中心

Answer 1

我最近回答了一个类似的问题：Fixed column using CSS

虽然我的答案是要修复左栏，但我认为你的情况的解决方案是这样的。 如果它不符合您的需求，请告诉我。

编辑（使用bootstrap col- *类）

由于OP要求明确使用bootstrap col- *类，请参阅更新的代码段：

PS：您可以调整.section CSS规则

中的填充

body {
    margin: 0 0 0 0;
}

#container {
    display: grid;
}

.section {
    padding: 5% 5% 5% 5%;
}

#right {
    background-color: aquamarine;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    box-sizing: border-box;
}

#right {
    background-color: beige;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container">
<div id="left" class="section col-xs-8">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consectetur purus nec volutpat. Donec vel libero nec est commodo facilisis vel et nisl. Praesent porta sed eros eu porta. Cras dolor nulla, ullamcorper et tincidunt quis, porta ut tellus. Maecenas cursus libero sed accumsan luctus. Integer sed consequat ante. Morbi sit amet lectus tempor elit tempor cursus ut sed enim. Donec placerat bibendum volutpat.
        </p>
        <p>
            Nunc sit amet eleifend sapien, sed tincidunt neque. Donec id sapien et nunc scelerisque iaculis dignissim nec mauris. Fusce at pretium nulla. Maecenas vel rutrum tellus, a viverra nunc. Aenean at arcu vitae dui faucibus dapibus. Vivamus hendrerit blandit mollis. Aenean sit amet lectus a metus faucibus condimentum. Proin vel eros ut elit pharetra lacinia vitae eu orci. Etiam massa massa, aliquam at pulvinar ut, porttitor eu mauris. Ut in iaculis sapien.
        </p>
        <p>
            In vitae rhoncus arcu. Maecenas elementum nunc quis magna finibus, vitae imperdiet diam pulvinar. Phasellus sit amet nibh eu massa facilisis luctus. Nulla ullamcorper sodales ante id vestibulum. Fusce felis nisi, lacinia sit amet mauris vel, euismod suscipit neque. Mauris quis libero eget enim facilisis pharetra. Fusce non ligula auctor nunc pretium dignissim eget eget turpis. Nam ultricies dolor ac libero maximus vestibulum. Mauris et tortor vitae nisi ultrices vestibulum ac id mauris. Proin interdum dapibus sollicitudin. Phasellus ultricies vulputate sem id hendrerit. Cras eget posuere nunc, in placerat velit. Pellentesque sed ante at elit ornare efficitur. Donec sed condimentum nisl. Curabitur dapibus leo id ligula dignissim pharetra.
        </p>
    </div>
    <div id="right" class="col-xs-4 section">
        <div>
           This should not scroll 
        </div>
    </div>
    
</div>