我有一张宽度为1300像素的图片，使用Bootstrap，我想让这张图片填满我的容器，容器的宽度设置为1300像素。我创建了一行，将其分为12列，并添加一个class为“image responsive”的图片。使用这种设置，我得到了下面的输出。
我希望我的图片能够一直延伸到我的内容中的图片所在位置，以下是我的代码。
<div class="row">
<div class="container">
<div class="col-md-12">
<img src="<?php bloginfo('template_directory'); ?>/assets/img/homeBanner.jpg" alt="placeholder 960" class="img-responsive"/>
</div>
</div>
</div>
<div class="container">
<div class="row">
<img class='img-fluid w-100' src="#" alt="" />
</div>
</div>
请查看已关闭的问题：https://github.com/twbs/bootstrap/issues/20830
(截至2018年4月20日，文档有误：https://getbootstrap.com/docs/4.1/content/images/中写道img-fluid应用max-width:100%;height:auto;但实际上img-fluid并不能解决这个问题，手动在img标签添加这些样式属性（无论是否带有bootstrap类）也无法解决。)
请检查这是否解决了问题：
<div class="container-fluid no-padding">
<div class="row">
<div class="col-md-12">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
</div>
</div>
</div>
CSS
.no-padding {
padding-left: 0;
padding-right: 0;
}
Css类no-padding将覆盖默认的Bootstrap容器内边距。
完整示例在此处。
@更新如果您使用的是Bootstrap 4，那么可以更简单地完成。
<div class="container-fluid px-0">
<div class="row">
<div class="col-md-12">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
</div>
</div>
</div>
这里有更新的示例链接。
class="container-fluid p-0"。 - Marco Sanchezbootstrap4 中使用 img-fluid 代替 img-responsive。 - Yousef Altaf <div class="container-fluid px-0">
<div class="row mx-0">
<div class="col-12 px-0">
<img src="images/top.jpg" class="img-fluid w-100">
</div>
</div>
</div>
<div class="container-fluid w-100 h-auto m-0 p-0">
<img src="someimg.jpg" class="img-fluid w-100 h-auto p-0 m-0" alt="Patience">
</div>
container类有15像素的左右内边距，如果您想要去掉这个内边距，请使用以下代码，因为row类有-15像素的左右外边距。
<div class="container">
<div class="row">
<img class='img-responsive' src="#" alt="" />
</div>
</div>
.row内插入.col）。从容器或列中删除填充似乎是更好的方法。另一个选项是完全删除所有Bootstrap类（.container，.row和.col），然后在下一节中打开.container。 - Giorgio Tempesta.row而不使用.col是没有问题的，但是如果没有.row而使用.col是错误的，因为涉及到float）另外，删除.container是不可能的，因为您添加.container类是因为您想要设计一个有框视图。没有.container就没有宽度限制，除非您定义了自己的容器，例如：my-container，这是错误和不必要的。 - Mehdi Dehghani.row 的情况下插入 .col，事实上我的意思是尽可能坚持使用 .container > .row > .col 结构。如果你有信心不在 .row 中插入 .col，当然可以这么做，也许你不会遇到任何问题，但根据我的经验，为了能够在需要时更改结构最好还是避免这样做。 - Giorgio Tempesta.row的情况下插入.col，我添加了这个信息是为了使我的评论更有用（希望如此）。是的，你的解决方案也可以，实际上被接受的答案与你的解决方案类似，关于灵活性，这取决于编辑CSS是否比编辑HTML（如你所提到的）更容易，我认为我的解决方案唯一的优点就是少了一些HTML标签和CSS，仅此而已。 - Mehdi Dehghani这将与其他答案中的许多操作相同，但会使边缘与窗口对齐，因此不会出现滚动条。
<div class="container-fluid">
<div class="row">
<div class="col" style="padding: 0;">
<img src="example.jpg" class="img-responsive" alt="Example">
</div>
</div>
</div>
row类必须嵌套在container类内，将顺序更改为.container > .row > .col。 - Mehdi Dehghani