Question

我想在当前有图片的卡片顶部添加3个div元素。我想添加一个图像，徽标和文本消息来代替该图像。我该怎么办？

预先感谢

这是我的代码

1）HTML

<div class="card">

  <b-card no-body
          style="width: 20rem;"
          img-src="https://placekitten.com/380/200"
          >

      <b-list-group  class="group">
          <b-list-group-item>Anvay Joshi</b-list-group-item>
          <b-list-group-item>Computer</b-list-group-item>
          <b-list-group-item>A-1103</b-list-group-item>
          <b-list-group-item>30-11-1997</b-list-group-item>
          <b-list-group-item>anvay.joshi@viit.ac.in</b-list-group-item>
          <b-list-group-item>9766583977</b-list-group-item>
      </b-list-group>
      <b-button href="#" variant="primary">QR Code</b-button>
  </b-card>

2）CSS

.group {
        text-align: center;
       }

.header{
        text-align: center;
       }

.card  {
         margin: 25px 120px 25px 240px;
         border: none;
       }

我的实际输出如下所示

/Users/anvayjoshi/Desktop

我的预期输出是卡片的顶部，如图所示

/Users/anvayjoshi/Desktop

请帮助我!!!!!

Answer 1

您不必添加img-src上的b-card属性，而只需添加一个新的b-list-group-item。

Here's a jsfiddle进行了演示，并an image of the result。

new Vue({
  el: "#app",
  data: {
  }
});

.image {
  float: left;
}
  
.logo {
  float: left;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 20px;
}
  
.text {
  float: left;
  width: 100px;
}

.group {
  text-align: center;
}

.header {
  text-align: center;
}

.card {
  margin: 10px;
  border: none;
}

<div id="app">
  <div class="card">
    <b-card no-body style="width: 20rem;">
      <b-list-group class="group">
        <b-list-group-item>
          <img class="image" src="https://placekitten.com/100/100" />
          <img class="logo" src="https://placekitten.com/50/50" />
          <div class="text">
            Vishwakarma Institute of Information Technology
          </div>
        </b-list-group-item>
        <b-list-group-item>Anvay Joshi</b-list-group-item>
        <b-list-group-item>Computer</b-list-group-item>
        <b-list-group-item>A-1103</b-list-group-item>
        <b-list-group-item>30-11-1997</b-list-group-item>
        <b-list-group-item>anvay.joshi@viit.ac.in</b-list-group-item>
        <b-list-group-item>9766583977</b-list-group-item>
      </b-list-group>
      <b-button href="#" variant="primary">QR Code</b-button>
    </b-card>
  </div>
</div>

在<b-card>中创建多个div元素

1 个答案: