Question

我从这里得到参考：

https://getbootstrap.com/docs/4.0/components/jumbotron/

https://coreui.io/demo/#base/jumbotron.html

我的脚本是这样的：

<template>
  <div class="wrapper">
    <div class="animated fadeIn">
      <b-card>
          <b-row v-for="row in formattedClubs">
              <b-col v-for="club in row" cols>
                  <b-jumbotron header="" lead="">
                      <b-link to="#">
                          <b-img v-on:click="add(club)" thumbnail fluid src="https://picsum.photos/250/250/?image=54" alt="Thumbnail" />
                      </b-link>
                      <b-link href="#" class="card-header-action btn-close">
                          {{club.description}}
                      </b-link>
                      <p>{{club.price}}</p>
                      <p>{{club.country}}</p>
                      <div class="text-center my-3">
                          <b-btn variant="primary">Add</b-btn>
                      </div>
                  </b-jumbotron>
              </b-col>
          </b-row>
      </b-card>
    </div>
  </div>
</template>
<script>
  export default {
      name: 'jumbotrons',
      data () {
          return{
              clubs: [
                  {id:1, description:'chelsea is the best club in the world and chelsea has a great player', price:1000, country:'england'},
                  {id:2, description:'liverpool has salah', price:900, country:'england'},
                  {id:3, description:'mu fans', price:800, country:'england'},
                  {id:4, description:'city has a great coach. Thas is guardiola', price:700, country:'england'},
                  {id:5, description:'arsenal player', price:600, country:'england'},
                  {id:6, description:'tottenham in london', price:500, country:'england'},
                  {id:7, description:'juventus stadium', price:400, country:'italy'},
                  {id:8, description:'madrid sell ronaldo', price:300, country:'spain'},
                  {id:9, description:'barcelona in the spain', price:200, country:'spain'},
                  {id:10, description:'psg buys neymar at a fantastic price', price:100, country:'france'}
              ]
          }
      },
      computed: {
          formattedClubs() {
              return this.clubs.reduce((c, n, i) => {
                  if (i % 5 === 0) c.push([]);
                  c[c.length - 1].push(n);
                  return c;
              }, []);
          }
      }
  }
</script>
<style scoped>
    .jumbotron {
        padding: 0.5rem 0.5rem;
    }
</style>

结果视图如下：

根据上图，可以看出每个盒子的高度都不同。这是由于说明长度不同

即使描述的长度不同，如何使所有盒子的高度都相同？

Answer 1

您应该使用Cards而不是Jumbotrons，那么您可以简单地使用Card组。

https://getbootstrap.com/docs/4.0/components/card/#card-groups

它们的大小都相同。

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Vue-Bootstrap还支持大小相同的卡组，如您在此处看到的https://bootstrap-vue.js.org/docs/components/card/#card-groups

Answer 2

以前没有使用过vue，但是您可以使用flexbox处理CSS。

.Wrapper {
  display: flex;
  flex-wrap: wrap;
}

.Item {
  background: #f5f5f5;
  display: flex;
  flex: 0 1 180px;
  flex-direction: column;
  text-align: center;
  margin: 10px;
  padding: 5px;
  border: 1px solid #ddd;
}

.ImgWrap {
  position: relative;
  background: #fff;
  flex: 0 1 180px;
  width: 100%;
  display: block;
  overflow: hidden;
}

.ImgWrap img {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.Description {
  flex:1;
  padding: 10px 0;
  font-size: 0.9em;
  word-wrap: break-word;
}

.Price,
.Country {
  background: #eaeaea;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin: 2px 0 10px 0;
  padding: 5px;
  color: #8a8a8a;
}

.Btn {
  background: #20a8d8;
  border: none;
  border-radius: 3px;
  color: #fff;
  padding: 10px;
}

<div class="Wrapper">

  <div class="Item">
    <div class="ImgWrap">
      <img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
    </div>
    <div class="Description">
      <p>This is some descriptive text.</p>
    </div>
    <p class="Price">800</p>
    <p class="Country">England</p>
    <input class="Btn" type="submit" value="Add">
  </div>

  <div class="Item">
    <div class="ImgWrap">
      <img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
    </div>
    <div class="Description">
      <p> dapibus congue odio placerat quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, ante ac vulputate malesuada, nunc ex lobortis.</p>
    </div>
    <p class="Price">800</p>
    <p class="Country">England</p>
    <input class="Btn" type="submit" value="Add">
  </div>

  <div class="Item">
    <div class="ImgWrap">
      <img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
    </div>
    <div class="Description">
      <p>Nam accumsan aliquet congue. Quisque orci tortor, ullamcorper a auctor sit amet, luctus non ante. Proin rutrum purus quis tellus pulvinar, at tincidunt odio sagittis. Nam aliquet risus sit amet suscipit dictum. Sed sed porta urna. </p>
    </div>
    <p class="Price">1000</p>
    <p class="Country">England</p>
    <input class="Btn" type="submit" value="Add">
  </div>

  <div class="Item">
    <div class="ImgWrap">
      <img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
    </div>
    <div class="Description">
      <p>Nam accumsan aliquet congue. Quisque orci tortor.</p>
    </div>
    <p class="Price">700</p>
    <p class="Country">England</p>
    <input class="Btn" type="submit" value="Add">
  </div>

  <div class="Item">
    <div class="ImgWrap">
      <img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
    </div>
    <div class="Description">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non pellentesque elit, sit amet placerat nisl. Quisque hendrerit risus nisl, vel dignissim est congue in.</p>
    </div>
    <p class="Price">600</p>
    <p class="Country">England</p>
    <input class="Btn" type="submit" value="Add">
  </div>

</div>

Answer 3

只需在巨无霸上使用h-100 ...

      <b-col v-for="club in row" cols>
          <b-jumbotron header="" lead="" class="h-100">
              <b-link to="#">
                  <b-img v-on:click="add(club)" thumbnail fluid src="https://picsum.photos/250/250/?image=54" alt="Thumbnail" />
              </b-link>
              <b-link href="#" class="card-header-action btn-close">
                  {{club.description}}
              </b-link>
              <p>{{club.price}}</p>
              <p>{{club.country}}</p>
              <div class="text-center my-3">
                  <b-btn variant="primary">Add</b-btn>
              </div>
          </b-jumbotron>
      </b-col>

这就是所有需要的，因为行内的cols高度相同（基于最高的高度）。 Bootstrap 4使用flexbox。

即使描述发生变化，如何设置盒子的高度也保持不变？（CSS）

3 个答案:

即使描述发生变化，如何设置盒子的高度也保持不变？ （CSS）

3 个答案:

即使描述发生变化，如何设置盒子的高度也保持不变？（CSS）