如何使用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在整个屏幕上制作图像？

回答

相关问题