Question

我试图将图片嵌套在jumbotron和container中，但无济于事。这是我最近的努力，但没有成功：

<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>

Answer 1

您缺少课程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>

更新（取自评论）

那是因为你的图像小于容器1024px（img）VS 1170px（在md视图中）所以

使用较大的图片，例如here

或
将width:100%设置为img，并为较大的屏幕删除课程img-responsive（媒体查询）

Answer 2

行必须放在.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/

如何使用Bootstrap在屏幕上制作图像？

2 个答案: