Question

所以我一直在使用这个站点（http://cee.cgreen.ca/index.php?page=designs）（这是一个原型），但是bootstrap似乎总是很不稳定。总有一些钩子将产品捕获到一个用于自己的行等。我似乎无法弄明白。 ; - ;

    // HTML
<div id="products">
    <div class="span4"> //twitter span
    <div class="product-grid"> //contained image
    <div class="product-grid-item">
    <div class="product-link" title="Pin this!">

    <img src="images/designs/shirt.png" class="product-photo">

    <div class="over-wrapper" style="opacity: 0; display: block;"></div>
    <div class="over-content" style="opacity: 0; display: block;"><br><br><br>

    <a href="link" data-pin-do="buttonPin" data-pin-config="none" target="_blank">
    <img src="images/pinthis.png" style="margin:auto;"></a> 

    </div></div></div></div></div>

/** CSS **/
#products {
    text-align: center;
    color: #999999;
    text-decoration: none;
    font: 12px "proxima-nova";
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
}

.product-grid{
  color: #666666;
  margin:10px;
}

.generated-height .product-grid-item {
  width: 177px;
  position: absolute;

  bottom: 0;

  }

.product-grid img{
  display: block;
  margin: 0 auto;
  }

.product-grid a{
  text-decoration: none;
  display: block;
  color: #333333;

  }

.product-grid .product-link{
  display: block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  margin: 0;
  min-height: 50px;
  /* for ie6: */
  width: 100%;
  }

.product-grid .product-link .over{

    position: Absolute;    
    top: 0;
    left: 0;
    display: none;
}

.product-photo{
  max-width: 100%;
}
.ie6 .product-grid{ overflow: hidden; }

.span4 {
  width: 300px;
}

.row-fluid .span4 {
  width: 31.91489%;
  *width: 31.8617%;
}

Answer 1

对于产品部分，每行有6个span4。

Spans每行最多可以添加12个，因此每行更改为3个span4s，并取消自定义CSS

.span4 {
 width: 300px;
}

Bootstrap - 图像库中的钩子

1 个答案: