ブートストラップコンテナの内側にあるときに左マージンを使ってdivをフラッシュする方法

Question

私のページに応じてシェイダーを左（または右）に移動しようとしています。問題はコンテナの使用に伴い発生します。私が欲しいもの

：

HTML：

<div class="container"> 
    <div class="col-xs-5"> 
    <div class="shader" style="margin-top: 500px;"> 
     <h3>Super cool title</h3> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
     </p> 
    </div> 
    </div> 
</div> 

そして、次のCSS：

.shader { 
    background-color: rgb(254, 254, 254); 
    background-color: rgba(254, 254, 254, 0.85); 
    padding: 15px; 
    border-radius: 5px; 
} 

問題は、私はコンテナ内に置いた場合、それは勝った、あります側に行く。私がコンテナの外に置くと、それはcolブロックの後で止まりません。

私は流体容器でこれを試しましたが、それでもまだ横にならないでしょう。私はまた、物事を適切に整列させるために多くのトリッキーをしなければならない。

Answer 1

2つの問題：

1. All col divs need to be in a row div。あなたは行divがありません。

2. 両方のタイプのコンテナdivは、15pxのパディングを持ちます。コンテナ内のすべてが他のように、あなたのシェーダ負のマージンを与えるエッジや

3. に触れるよう
   • は、コンテナクラスからパディングを削除します。あなたがコンテンツをしたい場合には、エッジと面一に、あなたがするか必要があるの内側にコンテナ内の要素は、エッジに触れるにはしません。

例は、以下のあなただけのシェーダがエッジをタッチします想定しています。シェーダがエッジに触れるのを見ることができるように、バックグラウンドとしてイメージプレースホルダも追加しました。あなたが問題にjsFiddleを作成することができます

body { 
 
\t background: url(http://placehold.it/1000x1000); 
 
    background-size: cover; 
 
} 
 

 
.shader { 
 
    background-color: rgb(254, 254, 254); 
 
    background-color: rgba(254, 254, 254, 0.85); 
 
    padding: 15px; 
 
    margin-left: -15px; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<div class="container-fluid"> 
 
<div class="row"> 
 
    
 
    <div class="col-xs-5"> 
 
    <div class="shader" style="margin-top: 500px;"> 
 
     <h3>Super cool title</h3> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-7"> 
 
    
 
    </div> 
 
</div> 
 
</div>