col- *を使用してコンテナに固定された使用位置

Question

containerのデザインを実装しようとしていますが、その中に2列あり、1つはcol-lg-8であり、1つは固定位置のcol-lg-4です。

私は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以上です。containerの内側に配置しようとしています。すべてのコンテンツを中心に配置されます。

Answer 1

私は最近、同様の質問に答えました：Fixed column using CSS

私の答えは固定されていましたが、あなたの状況に対する解決策は、このようなものでしょうか？ あなたのニーズに合わない場合は教えてください。 （ブートストラップcol- *クラスを使用して）

EDIT

OPは、ブートストラップ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>