代码之家 › 专栏 › 技术社区 › Success Man

如何设置框的高度保持不变,即使描述更改((Css)

vue-component bootstrap-4 vuejs2 vue.js css

Success Man · 技术社区 · 6 年前

我从这里得到参考:

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>

结果视图如下:

从上图可以看出,每个盒子的高度都不一样。这是由于描述的长度不同

我怎样才能使所有盒子的高度相同,即使描述的长度不同?

3 回复 | 直到 6 年前

niclas_4 6 年前

你应该使用卡片而不是巨型卡片,然后你可以简单地使用卡片组。

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引导还支持大小相等的卡组,如您在这里看到的 https://bootstrap-vue.js.org/docs/components/card/#card-groups

DreamTeK 6 年前

未使用 vue 但是你可以使用 flexbox

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

Carol Skelly 6 年前

只是使用 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>