Question

我目前正在学习使用引导带进行前端开发的过程，似乎遇到了一个问题，当我将浏览器调整为平板电脑大小{{3}时，我在网格上拥有的图像似乎带有“额外”框。 } original size

目前我有9张图片，并且已使用下面的代码解决了该图片；

                <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <!-- 2nd row -->
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <!-- 3rd row -->
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    </div>
                </div>      
            </div>
        </div>

可以在此链接Tablet size中找到实际代码。请注意，我仍在使用Bootstrap 3

谢谢。

Answer 1

您的第四张照片小于其他照片。所有照片均为500 x 333像素，但是this one为500 x 331像素。

基本上是this is what is happening。图片中缺少的2px正在“错误”位置创建新行。

您可以通过编辑图像或使用CSS（height：333px）甚至是img标签处的HTML属性（height ='333'）来确保图像具有相同的高度。

Answer 2

那不是一个额外的框，发生的是您正在使用bootstrap之前的4.0版本，它会将元素浮动在其网格系统上。当您的第四个图片高度（331px）小于其他高度（333px）时，浮动流就会中断...

您可以使用新的4.0+ bootstrap，该版本在其网格系统上使用弹性框，它将解决此问题。或者，您也可以在Bootstrap 3上应用clearfix方法，详情请参见...

请参阅：https://getbootstrap.com/docs/4.1/layout/grid/

另请参阅：https://getbootstrap.com/

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
			<div class="jumbotron">
				<h1><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> The Image Gallery</h1>
				<p>
					Manila - A bunch of images from the city I was born in (with photos I didn't take)
				</p>
				<div class="row">
					<div class="col-lg-4 col-sm-6">
							<img src="https://images.unsplash.com/photo-1520177621480-030b90c31f1c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e35879c1bf55ea0b9d516fa110885ead&auto=format&fit=crop&w=500&q=60"  class="img-thumbnail">
					</div>
					<div class="col-lg-4 col-sm-6">
							<img src="https://images.unsplash.com/photo-1521993225894-b506a694ae66?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6e83cbfd2d523ec1793dc2f9b285b574&auto=format&fit=crop&w=500&q=60" class="img-thumbnail">
					</div>
					<div class="col-lg-4 col-sm-6">
							<img src="https://images.unsplash.com/photo-1510672151757-6a0d9d06b4fb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=64c5bed898600148d787956c4446d623&auto=format&fit=crop&w=500&q=60" class="img-thumbnail">
					</div>
					<!-- 2nd row -->
					<div class="col-lg-4 col-sm-6">
							<img src="https://images.unsplash.com/photo-1521295105158-fdc2a8225628?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=eb9798deb2e23486ef9500b392c142a5&auto=format&fit=crop&w=500&q=60" class="img-thumbnail">
					</div>
					<div class="col-lg-4 col-sm-6">
							<img src="https://images.unsplash.com/photo-1514610069400-202a277fac8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=63d2b01d61b17f85d076c0f66237f3da&auto=format&fit=crop&w=500&q=60" class="img-thumbnail">
					</div>
					<div class="col-lg-4 col-sm-6">
							<img src="https://images.unsplash.com/photo-1488417607860-c37d00aebe62?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d4528d4f6d029b4cadf847d84792728f&auto=format&fit=crop&w=500&q=60" class="img-thumbnail">
					</div>
					<!-- 3rd row -->
					<div class="col-lg-4 col-sm-6">
							<img src="https://images.unsplash.com/photo-1526626607369-f89fe1ed77a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6959884bfc67d7bdefd4dfdbd2c5ba67&auto=format&fit=crop&w=500&q=60" class="img-thumbnail">
					</div>
					<div class="col-lg-4 col-sm-6">
							<img src="https://images.unsplash.com/photo-1507486673731-8e2cb2d8f106?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c258c1d18758475d7499e21d2443de57&auto=format&fit=crop&w=500&q=60" class="img-thumbnail">
					</div>
					<div class="col-lg-4 col-sm-6">
							<img src="https://images.unsplash.com/photo-1521296382126-7f742828640b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b8ca335ff63ed7c073a3e42990b49964&auto=format&fit=crop&w=500&q=60" class="img-thumbnail">
					</div>		
				</div>
			</div>

要在Bootstrap 3上解决此问题，可以使用clearfix方法：

<div class="clearfix"></div>

请参见下面的代码段

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="jumbotron">
    <h1><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> The Image Gallery</h1>
    <p>
      Manila - A bunch of images from the city I was born in (with photos I didn't take)
    </p>
    <div class="row">
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
          <img src="https://images.unsplash.com/photo-1520177621480-030b90c31f1c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e35879c1bf55ea0b9d516fa110885ead&auto=format&fit=crop&w=500&q=60">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
          <img src="https://images.unsplash.com/photo-1521993225894-b506a694ae66?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6e83cbfd2d523ec1793dc2f9b285b574&auto=format&fit=crop&w=500&q=60">
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
          <img src="https://images.unsplash.com/photo-1510672151757-6a0d9d06b4fb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=64c5bed898600148d787956c4446d623&auto=format&fit=crop&w=500&q=60">
        </div>
      </div>
      <!-- 2nd row -->
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
          <img src="https://images.unsplash.com/photo-1521295105158-fdc2a8225628?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=eb9798deb2e23486ef9500b392c142a5&auto=format&fit=crop&w=500&q=60">
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
          <img src="https://images.unsplash.com/photo-1514610069400-202a277fac8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=63d2b01d61b17f85d076c0f66237f3da&auto=format&fit=crop&w=500&q=60">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
          <img src="https://images.unsplash.com/photo-1488417607860-c37d00aebe62?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d4528d4f6d029b4cadf847d84792728f&auto=format&fit=crop&w=500&q=60">
        </div>
      </div>
      <div class="clearfix"></div>
      <!-- 3rd row -->
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
          <img src="https://images.unsplash.com/photo-1526626607369-f89fe1ed77a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6959884bfc67d7bdefd4dfdbd2c5ba67&auto=format&fit=crop&w=500&q=60">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
          <img src="https://images.unsplash.com/photo-1507486673731-8e2cb2d8f106?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c258c1d18758475d7499e21d2443de57&auto=format&fit=crop&w=500&q=60">
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
          <img src="https://images.unsplash.com/photo-1521296382126-7f742828640b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b8ca335ff63ed7c073a3e42990b49964&auto=format&fit=crop&w=500&q=60">
        </div>
      </div>
    </div>
  </div>

Answer 3

是的，这些家伙是对的，第四个图像更大。

在此处查看引导程序3版本https://jsfiddle.net/joshmoto/3aqfhoz7/

但是，如果您使用引导程序4，那么这不是问题。弹性规则！

在此处查看引导程序4版本https://jsfiddle.net/joshmoto/mev4sqbo/2

或通过确保图像比例恒定来进行相应修正。

.jsfiddle-code {
 i-have: none;
}

图像在Bootstrap上未正确对齐

3 个答案: