Question

我正在开发一个电子商务网站，其中所有产品均以“ cols”显示在同一页面上问题是我无法使用CSS修复col宽度或高度

<div class="container">
  <div class="row">
    <!-- BEGIN PRODUCTS -->
    <div
      class="col-md-3 col-sm-6 col-equal"
      *ngFor="let p of (titres | sort: titreSort)"
    >
      <span class="thumbnail">
        <img src="{{ p.URL_couv }}" alt="{{ p.id }}" />
        <h4>
          <label style="display: block; width: 600px;"
            >{{ p.titre }} n° {{ p.numero }}</label
          >
        </h4>

        <p></p>
        <hr class="line" />
        <div class="row">
          <div class="col-md-6 col-sm-6">
            <p class="price"></p>
          </div>
          <div class="col-md-6 col-sm-6"></div>
        </div>
      </span>
    </div>
  </div>
</div>

这是我的代码

这就是产品的展示方式

这是我的CSS代码

   

.side-body {
  margin-left: 310px;}
   
.right {
  float: right;
  border-bottom: 2px solid #4b8e4b;
}

.thumbnail {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.thumbnail:hover {
  opacity: 1;
  box-shadow: 0px 0px 10px #41d834;
}
.line {
  margin-bottom: 5px;
}

@media (max-width: 768px) {
  .col-equal {
    margin: auto;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
  }
}

有什么需要帮助的吗？谢谢

Answer 1

尝试将最小高度设置为h4，因此所有产品说明的高度都应相同。

Answer 2

尝试在图像下方的文本框（说明）上设置最小高度，我认为这可以解决您的问题

Answer 3

似乎您将所有内容都添加进来了，因此您需要将span标签设为block或inline-block元素

使用：

.thumbnail{
display:inline-block;
width:your-width-value;
height:your-height-value;
}

Answer 4

Bootstrap具有.row-eq-height，用于在一行中的所有列上设置相等的高度。但是，Internet Explorer不支持此功能。

<div class="container">
  <div class="row row-eq-height">

这也可以通过在行上设置flex-wrap: wrap;来解决。

参考：http://getbootstrap.com.vn/examples/equal-height-columns/

Answer 5

在我看来，您似乎没有使用Bootstrap V4，而是使用了V3。

Bootstrap V3使用float: left，而Bootstrap V4使用display: flex

codepen.io/HerrSerker/pen/xMyyoM使用Bootstrap V3（出现问题）
codepen.io/HerrSerker/pen/vbVQYO使用Bootstrap V4（无问题）

如何使用CSS固定列的高度和宽度

5 个答案: