在bootstrap 3网格中排列图像 [英] line up images in bootstrap 3 grid

查看：113
本文介绍了在bootstrap 3网格中排列图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两个创建网格与3 x N图像。因此，我需要有敏感的风格。

I have two create grid with 3 x N images. As a result I need to have responsive style.

我的问题是图像有不同的宽度&高度（我不能控制这），并调整大小成比例。结果图像不排列。如下图所示，网格应该有第一行中的3个图像和第二行中的一个图像。所有图片的高度应相等。

My problem is that images have different width & height (I cannot control this) and are resized proportional. As a result images are not lined up. As you can see in image below the grid should have 3 images in first line and one image in second line. All images should be lined up with equal height.

Html：

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
      <div class="blogposttwo post">
        <figure>
          <a href="http://moneyti.co/18-tests2/">    
            <img src="http://moneyti.co/wp-content/uploads/2015/12/Hydrangeas.jpg" class="img-responsive hovereffect">
          </a>
        </figure>
      </div>
      <h4>
          <a href="http://moneyti.co/18-tests2/">18 tests2</a>
       </h4>          
    </div>

    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
      <div class="blogposttwo post">
        <figure>
          <a href="http://moneyti.co/18-tests/">  
            <img src="http://moneyti.co/wp-content/uploads/2015/12/img16.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <h4>
                <a href="http://moneyti.co/18-tests/">
                    18 tests                </a>
            </h4>
      <!-- Post Title End -->
    </div>

    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
      <div class="blogposttwo post">
        <figure>
          <a href="http://moneyti.co/pardaugavas-ekas-2/">

            <img src="http://moneyti.co/wp-content/uploads/2015/11/fb5be-clip-112kb.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <h4>
                <a href="http://moneyti.co/pardaugavas-ekas-2/">
                    Pārdaugavas ēkas3               </a>
            </h4>
      <!-- Post Title End -->
    </div>

    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
      <div class="blogposttwo post">
        <figure>
          <a href="http://moneyti.co/18-video/">

            <img src="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <h4>
                <a href="http://moneyti.co/18-video/">
                    Raksts 18+              </a>
            </h4>
    </div>    
  </div>
</div>



CSS：
我有一些额外的CSS样式，但问题也没有。

CSS: I have some additional CSS styles, but the problem is also without them.

.post {
  margin-bottom: 20px;
}

.blogposttwo {
  width: 100%;
  float: left;
}

.blogposttwo figure {
  width: 100%;
  float: left;
}

.blogposttwo figure a {
  float: left;
  width: 100%;
}

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

Fiddler： https://jsfiddle.net/dhzL6hnm/

推荐答案

如果您因为你在不同的断点处放置了不同数量的块，所以你必须结合媒体查询来清除你的浮动。

If you're going to clear your floats you have to do this in conjunction with media queries since you're placing a different number of "blocks" at different breakpoints.

@media (min-width: 1200px) {
  .item:nth-child(3n+1) {
    clear: left;
  }
}

@media (max-width: 1199px) and (min-width: 768px) {
  .item:nth-child(2n+1) {
    clear: left;
  }
}

查看完整页面的工作示例代码片段。

See working example Snippets at Full Page.

示例1 

body {
  margin: 10px;
}
.post {
  margin-bottom: 20px;
}
.blogposttwo {
  width: 100%;
  float: left;
}
.blogposttwo figure {
  width: 100%;
  float: left;
}
.blogposttwo figure a {
  float: left;
  width: 100%;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}
@media (min-width: 1200px) {
  .item:nth-child(3n+1) {
    clear: left;
  }
}
@media (max-width: 1199px) and (min-width: 768px) {
  .item:nth-child(2n+1) {
    clear: left;
  }
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1822 post type-post status-publish format-standard has-post-thumbnail hentry category-music category-48">
        <figure>
          <a href="http://moneyti.co/18-tests2/">
            <img src="http://moneyti.co/wp-content/uploads/2015/12/Hydrangeas.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="http://moneyti.co/18-tests2/">
					ONE			</a>
			</h4>
      <!-- Post Title End -->
    </div>

    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1816 post type-post status-publish format-standard has-post-thumbnail hentry category-awards category-48">
        <figure>
          <a href="http://moneyti.co/18-tests/">
            <img src="http://moneyti.co/wp-content/uploads/2015/12/img16.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="http://moneyti.co/18-tests/">
					TWO				</a>
			</h4>
      <!-- Post Title End -->
    </div>

    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1417 post type-post status-publish format-standard has-post-thumbnail hentry category-news category-48">
        <figure>
          <a href="http://moneyti.co/pardaugavas-ekas-2/">

            <img src="http://moneyti.co/wp-content/uploads/2015/11/fb5be-clip-112kb.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="http://moneyti.co/pardaugavas-ekas-2/">
					THREE				</a>
			</h4>
      <!-- Post Title End -->
    </div>

    <div class="col-lg-4 col-sm-6 item">
      <div class="blogposttwo post-1073 post type-post status-publish format-standard has-post-thumbnail hentry category-48 tag-adult tag-fun-video">
        <figure>
          <a href="http://moneyti.co/18-video/">
            <img src="http://moneyti.co/wp-content/uploads/2015/12/Jellyfish.jpg" class="img-responsive hovereffect" alt="">
          </a>
        </figure>
      </div>
      <!-- Post Title Start -->
      <h4>
				<a href="http://moneyti.co/18-video/">
					FOUR				</a>
			</h4>
      <!-- Post Title End -->
    </div>

  </div>
</div>

Varying Heights

Example 2: Varying Heights

< pre class =snippet-code-css lang-css prettyprint-override> body {margin：10px;}。post {margin-bottom：20px;} blogposttwo {width：100％; float：left;}。blogposttwo figure {width：100％; float：left;}。blogposttwo figure a {float：left; width：100％;}。img-responsive，.thumbnail> img，.thumbnail a> img，.carousel-inner> .item> img，.carousel-inner> .item> a> img {display：block; max-width：100％; width：100％; height：auto;} @ media（min-width：1200px）{.item：nth-​​child（3n + 1）{clear：left; }} @ media（max-width：1199px）and（min-width：768px）{.item：nth-​​child（2n + 1）{clear：left; }}

这篇关于在bootstrap 3网格中排列图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆