Html 图像未正确放置在我的引导div中
我一直在尝试将我的图像融入我的响应网格设计中，但不管我怎么努力，它都不起作用。我的图像大小为375*250px，只有一个例外，那就是745*250px 我已经把我想要的布局的图像，但它实际上是什么 而不是 下面是我的代码-一直在尝试包含图像的div的视口宽度，但似乎不起作用-图像似乎溢出了为它们定义的网格区域Html 图像未正确放置在我的引导div中,html,css,image,twitter-bootstrap,Html,Css,Image,Twitter Bootstrap,我一直在尝试将我的图像融入我的响应网格设计中，但不管我怎么努力，它都不起作用。我的图像大小为375*250px，只有一个例外，那就是745*250px 我已经把我想要的布局的图像，但它实际上是什么 而不是 下面是我的代码-一直在尝试包含图像的div的视口宽度，但似乎不起作用-图像似乎溢出了为它们定义的网格区域 <div class="row" id="picture"> <div class ="col-md-8 col-lg-8" id="seeBig">
<div class="row" id="picture">
<div class ="col-md-8 col-lg-8" id="seeBig">
<img src="see.jpg" />
</div> <!--See Big-->
<div class ="col-xs-8 col-sm-8 col-md-4 col-lg-4" id="eat">
<img src="eat.jpg" />
</div> <!--Eat -->
<div class ="col-xs-4 col-sm-4 col-md-4 col-lg-4" id="do">
<img src="do.jpg" />
</div> <!--Do -->
<div class ="col-xs-12 col-sm-12" id="seeSmall">
<img src="see.jpg" />
</div> <!--See Small-->
<div class ="col-xs-6 col-sm-6 col-md-4 col-lg-4" id="stay">
<img src="stay.jpg" />
</div> <!--Stay -->
<div class ="col-xs-6 col-sm-6 col-md-4 col-lg-4" id="shop">
<img src="shop.jpg" />
</div> <!--Picture-->
看起来“seeBig”的高度正在推动“do and”stay向下移动。有没有链接到我们可以看到其他情况的页面？谢谢。看起来“seeBig”的高度在推动“do”和“stay down”。有没有链接到我们可以看到其他情况的页面？谢谢。最简单的解决方案是使用内置引导。这将允许图像缩放到父元素。要对示例代码执行此操作，很简单：
<div class ="col-md-8 col-lg-8" id="seeBig">
<img src="see.jpg" class="img-responsive" alt="Responsive image Title">
</div> <!--See Big-->
希望这有帮助 最简单的解决方案是使用内置引导。这将允许图像缩放到父元素。要对示例代码执行此操作，很简单：
<div class ="col-md-8 col-lg-8" id="seeBig">
<img src="see.jpg" class="img-responsive" alt="Responsive image Title">
</div> <!--See Big-->
希望这有帮助 您可以给img标记一个最大宽度：100%您可以给img标记一个最大宽度：100%通过使用简单的引导类，使用这些类型的网格非常困难。为此，您必须使用行结构将这些图像放入容器中，如
<div class="row">
<div class="col-md-8"><img class="img-responsive" src"big_horizontal.jpg"></div>
<div class="col-md-4"><img class="img-responsive" src"another_img1.jpg"></div>
</div>
<div class="row">
<div class="col-md-4"><img class="img-responsive" src"another_img2.jpg"></div>
<div class="col-md-4"><img class="img-responsive" src"another_img3.jpg"></div>
<div class="col-md-4"><img class="img-responsive" src"another_img4.jpg"></div>
</div>
但是，当一个页面上有这么多图像时，这种类型的行结构就会变得杂乱无章。因此，对于如此多的图像，您可以使用免费且易于使用的插件。它最适合于类似图像库的结构。通过使用简单的引导类，很难使用这些类型的网格。为此，您必须使用行结构将这些图像放入容器中，如
<div class="row">
<div class="col-md-8"><img class="img-responsive" src"big_horizontal.jpg"></div>
<div class="col-md-4"><img class="img-responsive" src"another_img1.jpg"></div>
</div>
<div class="row">
<div class="col-md-4"><img class="img-responsive" src"another_img2.jpg"></div>
<div class="col-md-4"><img class="img-responsive" src"another_img3.jpg"></div>
<div class="col-md-4"><img class="img-responsive" src"another_img4.jpg"></div>
</div>
但是，当一个页面上有这么多图像时，这种类型的行结构就会变得杂乱无章。因此，对于如此多的图像，您可以使用免费且易于使用的插件。它最适合于类似图像库的结构。虽然我按照@Saurabh和@Aziz的建议将其分成了两行（谢谢大家！），但它会导致更大的尺寸，在断点处的两行之间有2倍的空白 我已经这样做了：
<div class="row" id="pictureBig">
<div class ="col-md-8" id="seeBig">
<img src="see.jpg" >
</div> <!--See Big-->
<div class ="col-md-4" id="eatBig">
<img src="eat.jpg">
</div> <!--Eat Big -->
</div> <!--Picture Big-->
<div class ="col-xs-6" id="eatSmall">
<img src="eat.jpg">
</div> <!--Eat Small -->
<div class ="col-xs-6" id="doSmall">
<img src="do.jpg" >
</div> <!--DoSmall -->
<div class ="row" id="pictureSmall">
<div class ="col-md-4" id="doBig">
<img src="do.jpg" >
</div> <!--DoBig -->
<div class ="col-xs-12" id="seeSmall">
<img src="see.jpg" >
</div> <!--See Small-->
<div class ="col-xs-6 col-md-4 " id="stay">
<img src="stay.jpg" />
</div> <!--Stay -->
<div class ="col-xs-6 col-md-4 " id="shop">
<img src="shop.jpg" >
</div> <!--Shop -->
</div> <!-- Row picture Small-->
虽然我已经按照@Saurabh和@Aziz（谢谢大家！）的建议将它分成了两行，但它的结果是在断点处的两行之间有一个2倍的空白 我已经这样做了：
<div class="row" id="pictureBig">
<div class ="col-md-8" id="seeBig">
<img src="see.jpg" >
</div> <!--See Big-->
<div class ="col-md-4" id="eatBig">
<img src="eat.jpg">
</div> <!--Eat Big -->
</div> <!--Picture Big-->
<div class ="col-xs-6" id="eatSmall">
<img src="eat.jpg">
</div> <!--Eat Small -->
<div class ="col-xs-6" id="doSmall">
<img src="do.jpg" >
</div> <!--DoSmall -->
<div class ="row" id="pictureSmall">
<div class ="col-md-4" id="doBig">
<img src="do.jpg" >
</div> <!--DoBig -->
<div class ="col-xs-12" id="seeSmall">
<img src="see.jpg" >
</div> <!--See Small-->
<div class ="col-xs-6 col-md-4 " id="stay">
<img src="stay.jpg" />
</div> <!--Stay -->
<div class ="col-xs-6 col-md-4 " id="shop">
<img src="shop.jpg" >
</div> <!--Shop -->
</div> <!-- Row picture Small-->
@Saurabh是对的，您需要将每个集合包装成一行。另外，您使用的冗余类（
col-md-4 col-lg-4cold-md-4imgcol-md-4 col-lg-4cold-md-4img