在bootstrap 3网格中排列图像

时间：2015-12-22 19:25:30

标签： html css twitter-bootstrap

我有两个带3 x N图像的创建网格。因此，我需要有响应式的风格。

我的问题是图像有不同的宽度和宽度。身高（我无法控制这个）并按比例重新调整大小。结果，图像没有排成一行。正如您在下面的图像中看到的那样，网格应该在第一行中有3个图像，在第二行中应该有一个图像。所有图像应排列成相同的高度。

enter image description here

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样式，但问题也没有它们。

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

3 个答案:

答案 0 :(得分：3)

你必须清除浮子。动态数量的浮动似乎很有挑战性，但实际上非常简单。只需在CSS中使用方便的nth-child选择器。

将以下CSS行添加到jsfiddle中，您可以看到它将清除每一行浮点数。请注意，在您的示例中，您有2行，因此// bind VBOs for vertex array and index array // for vertex coordinates let ptr = UnsafePointer<GLfloat>(bitPattern: 0) glBindBuffer(GLenum(GL_ARRAY_BUFFER), self.vertexBufferObject) glEnableVertexAttribArray(self.positionIndex) glVertexAttribPointer(self.positionIndex, GLint(3), GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(sizeof(GLfloat) * 8), ptr) glEnableVertexAttribArray(self.textureCoordinateIndex) glVertexAttribPointer(self.textureCoordinateIndex, GLint(2), GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(sizeof(GLfloat) * 8), ptr.advancedBy(6)) ：

nth-child(2n+1)

注意：在您的问题中，您提到您使用“3 x N张图片”，因此这将是.row div.clear:nth-child(2n+1) { clear:both; } 。

答案 1 :(得分：2)

如果您要清除浮动内容，则必须与媒体查询一起执行此操作，因为您要放置不同数量的＆＃34;块＆＃34;在不同的断点。

has_many :videos

参见完整页面的工作示例片段。

示例1

＆＃13;
＆＃13; 
@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;
  }
}
＆＃13; 
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;
  }
}
＆＃13;
＆＃13;
＆＃13;

示例2：变化高度

＆＃13;
＆＃13; 
<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>
＆＃13; 
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;
  }
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

我的解决方法不同。我通常，为了良好的架构，我在用完该行的12的跨度之后使用行类。但这是可选的。我确实要做的一件事就是为列分配一个最小高度，以便它们继续相应地换行。

在你的情况下，像这样：

.blogposttwo figure {
    width: 100%;
    float: left;
    min-height: 280px;
}

这是您解决的DEMO

p.s min-height控制容纳图像的容器的高度。不要在实际图像中使用.img-responsive类。

最大高度仍然是无限的，允许img-responsive类工作。如果，您希望所有照片都没有任何间隙，则需要Masonry.js提供的其他解决方案。请参阅link

相关问题
最新问题