ブートストラップ3のコンテナの全画面イメージ

Question

Ok。私は、 "Medium.comスタイル"のイメージアライメントを達成しようとしています。それは、コンテナと全幅よりも大きくなります。私は私がCSSとしなければならなかった知っていた何をした：

img { 
position: relative; 
left: 50%; 
height: auto; 
margin: 0px 0 0 -50vw; 
width: 100vw; 
max-width: 100vw; 
} 

は、それはほとんど私がブートストラップの全12のグリッドを使用する場合には、ことを除いて、やりたい、何らかの理由で、それが追加されますあなたはこのフィドルで見ることができるように、左側のボーダー、：https://jsfiddle.net/35f4ntqq/

私は（それを合計で11件のcolsを作る）COL-SM-10にCOL-SM-11を変更する場合は、しかし、それは動作します完璧に良い。

私はここで何が欠けていますか？または間違っている...？ ：/

Answer 1

私はあなたがimgタグのためのマージンプロパティをchangiesことができると思います。このよう

：

img { 
    position: relative; 
    left: 52%; 
    height: auto !important; 
    margin: 0px 0 0 -55vw; 
    width: 100vw; 
    max-width: 100vw !important; 
    height: auto !important; 
} 

がUpdated Bootply

Answer 2

はこれを試してください。 "medium.comスタイル"

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-1"> 
 
    Boo 
 
    </div> 
 
    <div class="col-xs-11"> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ligula nec erat dapibus ullamcorper. Aliquam egestas, justo nec dictum vestibulum, dui eros ullamcorper mauris, non facilisis lorem ligula ut ex. Mauris scelerisque libero nulla, eget luctus velit fringilla ut. Etiam ut magna eget elit gravida ultrices. Quisque a enim id leo tincidunt lobortis. Pellentesque nulla mi, aliquet non mauris et, aliquam egestas leo. Nulla convallis tincidunt gravida. Suspendisse aliquam lacinia eros sit amet pretium. Nam eu ipsum sit amet velit suscipit consectetur vel sit amet dolor. Sed ac aliquam est, dictum gravida est. Donec pellentesque condimentum est at bibendum. Aliquam erat volutpat. Nulla id urna non mauris faucibus fermentum. Phasellus quam ante, bibendum eget orci a, aliquam fringilla tortor. In vitae nulla nec leo tincidunt convallis. Integer ac ipsum a lorem sagittis pretium tincidunt id erat.</p> 
 
    </div> 
 
    <div class="col-sm-12"> 
 
     
 
<img class="img-responsive" src="http://www.lpzoo.org/sites/default/files/images/multimedia/kapukikingnosetonose1200.jpg"> 
 
</div> 
 
<div class="col-sm-12"> 
 
\t <p>Duis maximus est nec eros euismod, quis volutpat magna pellentesque. Maecenas orci sapien, gravida quis commodo a, pharetra at sapien. Etiam scelerisque nunc sit amet ligula volutpat convallis. Nam egestas commodo tortor at pellentesque. Pellentesque vitae dictum urna. Etiam tincidunt magna et aliquam tincidunt. Vestibulum blandit arcu a pulvinar auctor. Phasellus malesuada, tortor sit amet mollis pulvinar, felis felis lacinia tellus, tempus ultricies urna magna et augue. Fusce ut ipsum eget odio sodales viverra. Morbi sit amet hendrerit purus, sit amet porttitor sapien. Quisque ut quam eu erat elementum lobortis. Proin sit amet nisl eget est feugiat vulputate. Morbi eu orci semper, rhoncus lacus eget, fringilla lorem.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

あなたは所望の結果を達成するためにcontainer-fluidを使用することができます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<style> 
 
img { 
 
    height: auto; 
 
    width: 100%; 
 
} 
 
</style> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-1"> 
 
     Boo 
 
    </div> 
 
    <div class="col-sm-11"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ligula nec erat dapibus ullamcorper. Aliquam egestas, justo nec dictum vestibulum, dui eros ullamcorper mauris, non facilisis lorem ligula ut ex. Mauris scelerisque libero nulla, eget luctus velit fringilla ut. Etiam ut magna eget elit gravida ultrices. Quisque a enim id leo tincidunt lobortis. Pellentesque nulla mi, aliquet non mauris et, aliquam egestas leo. Nulla convallis tincidunt gravida. Suspendisse aliquam lacinia eros sit amet pretium. Nam eu ipsum sit amet velit suscipit consectetur vel sit amet dolor. Sed ac aliquam est, dictum gravida est. Donec pellentesque condimentum est at bibendum. Aliquam erat volutpat. Nulla id urna non mauris faucibus fermentum. Phasellus quam ante, bibendum eget orci a, aliquam fringilla tortor. In vitae nulla nec leo tincidunt convallis. Integer ac ipsum a lorem sagittis pretium tincidunt id erat.</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <img src="http://www.lpzoo.org/sites/default/files/images/multimedia/kapukikingnosetonose1200.jpg"> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-1"> 
 
    </div> 
 
    <div class="col-sm-11"> 
 
     <p>Duis maximus est nec eros euismod, quis volutpat magna pellentesque. Maecenas orci sapien, gravida quis commodo a, pharetra at sapien. Etiam scelerisque nunc sit amet ligula volutpat convallis. Nam egestas commodo tortor at pellentesque. Pellentesque vitae dictum urna. Etiam tincidunt magna et aliquam tincidunt. Vestibulum blandit arcu a pulvinar auctor. Phasellus malesuada, tortor sit amet mollis pulvinar, felis felis lacinia tellus, tempus ultricies urna magna et augue. Fusce ut ipsum eget odio sodales viverra. Morbi sit amet hendrerit purus, sit amet porttitor sapien. Quisque ut quam eu erat elementum lobortis. Proin sit amet nisl eget est feugiat vulputate. Morbi eu orci semper, rhoncus lacus eget, fringilla lorem.</p> 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/glebkema/pn8jbk8p/