Question

我正在尝试使用here上找到的几种方法来制作相同高度的引导列。除了mac上的safari之外，它在任何地方都能正常工作，其中所有列都在第一行中堆叠而不是浮动到下一行。这是HTML：

<div class="row">
    <div class="col-md-4 col-sm-4 col-xs-6 text-center">

        <div class="product_card">
            <a href="/buy/handsome-cream-3-pc-jodhpuri-suit"><img alt="Handsome Cream 3 Pc Jodhpuri Suit"
                                                                  src="/system/images/attachments/000/000/174/normal/open-uri20160927-22035-h7grcj?1474996752"></a>
            <div data-target="#loginSignUpModal" data-toggle="modal" onclick="return false;">
                <i class="fa fa-star-o" aria-hidden="true"></i> Shortlist
            </div>

            <a class="caption" href="/buy/handsome-cream-3-pc-jodhpuri-suit">
                <h3>Handsome Cream 3 Pc Jodhpuri Suit</h3>
                <span class="price">$380.00</span>
            </a></div>
    </div>
</div>

这是正在使用的CSS：

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    &> [class*='col-'] {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }
  }

这是MAC SAFARI的截图：

这是Ubuntu Chrome上的截图：

为什么野生动物园会和我的蠢货混在一起？如何在不使用JS的情况下解决这个问题？

Answer 1

我认为更简单的方法是在CSS中设置你想要的高度，删除img标签，并在你的第一个标签上添加背景封面图片：

＆＃13;

is

＆＃13;

.product_card {
  height: 300px;
  width: 190px;
  float: left;
  margin: 4px;
}

.product_card a:first-child {
  display: block;
  height: 100%;
  background-image: url('http://i.imgur.com/8YsAmq3.gif');
  background-position: center center;
  -webkit-background-size: cover;
  background-size: cover;
 }

 .product_card:first-child {
   margin-left: 0px;
 }

 .product_card:last-child {
   margin-right: 0px;
 }

＆＃13;

Bootstrap列不使用flex-box浮动/包装到下一行

1 个答案: