如何使用Bootstrap在整個屏幕上製作圖像？

我試圖將圖像嵌套在jumbotron和container中，但無濟於事。這裏是我的最新的努力，並沒有完全制定出：如何使用Bootstrap在整個屏幕上製作圖像？

<div class="row"> 
    <div class="full-width-div"> 
    <div class="col-md-12"> 
     <img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/Miami-Skyline-HD-Wallpapers1.jpeg_zps18p2ssu0.gif" alt=「90s Video Game Aesthetic Miami Skyline Photo」/> 
    </div> 
    </div> 
</div>

來源

2016-05-14 HomeBrainBox

你缺少container類來包裝它，並添加img-responsive到img

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-md-12"> 
 
     <img class="img-responsive" src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/Miami-Skyline-HD-Wallpapers1.jpeg_zps18p2ssu0.gif" alt=「90s Video Game Aesthetic Miami Skyline Photo」/> 
 
    </div> 
 
    </div> 
 
</div>

UPDATE（取自評論）

這是因爲圖像是比容器1,024像素x（IMG）VS 1170px較小（在md視圖），所以無論是

使用較大的圖像像here

或
設置width:100%到img並且還移除用於較大屏幕的類img-responsive（媒體查詢）

來源

2016-05-14 20:51:59 dippas

我已經嘗試過了，在圖像窗口的左側結束。 – HomeBrainBox

你能給這個網站的鏈接嗎？ – dippas

當然，http://codepen.io/luckycharm_boy/pen/JXVZQp – HomeBrainBox

爲了正確對齊和填充，行必須放在.container（固定寬度）或.container-fluid（全寬度）內。

使用行來創建水平的列組。

內容應該放在列中，並且只有列可以是行的直接子節點。

您也可以指定屏幕寬度。

For larger screens you can use col-lg-12 --> (≥1200px) 
For medium screens you can use col-md-12 --> Desktops (≥992px) 
For small screens you can use col-sm-12 --> (≥768px) 
For extra small screens you can use col-xs-12 --> Phones (<768px)

這裏是工作示例：https://jsfiddle.net/melih193/8wzg9qfL/2/

來源

2016-05-14 21:08:05 Hadnazzar

如何使用Bootstrap在整個屏幕上製作圖像？

回答

相關問題