使用元素 ui css 的一组页脚按钮

Question

我正在尝试使用 css 复制完整内容，但我没有找到页脚按钮。

这是我到目前为止使用元素 ui 和 css

的 el-card 所取得的成就

     <el-card>
   <div style="cursor: pointer;">
     <p>(15*47*14) Alternador Servo Toy </p>
     <img src="https://demo.facturador.pro/logo/imagen-no-disponible.jpg" class="img-thumbail img-custom">

   </div>
   <div class="card-footer" style="width: 100% ;">
     <el-button-group style="width: 100% ; padding: 0px ;">
       <el-button class="btn-primary-pos" size="mini" type="primary" icon="el-icon-edit"></el-button>
       <el-button class="btn-primary-pos" size="mini" type="primary" icon="el-icon-share"></el-button>
       <el-button class="btn-primary-pos" size="mini" type="primary" icon="el-icon-delete"></el-button>
     </el-button-group>
   </div>


 </el-card>

CSS如下

    .btn-primary-pos {
   background-color: #007bff;
   border-color: #007bff #007bff #007bff;
   color: #FFF;
 }

 .btn-primary-pos:hover,
 .btn-primary-pos.hover {
   background-color: #0069d9;
   border-color: #0069d9;
   color: #FFF;
 }


 .card-footer {
   padding: 0px 0.75rem !important;
 }

https://element.eleme.io/#/es/component/card#con-imagenes

Answer 1

你可以使用 flexbox 轻松解决这个问题。您的按钮必须随着内容的大小而增长：

<el-button-group class="group" style="width: 100% ; padding: 0px ;">
       <el-button class="btn-primary-pos" size="mini" type="primary" icon="el-icon-edit"></el-button>
       <el-button class="btn-primary-pos" size="mini" type="primary" icon="el-icon-share"></el-button>
       <el-button class="btn-primary-pos" size="mini" type="primary" icon="el-icon-delete"></el-button>
     </el-button-group>

CSS :

.btn-primary-pos {
   background-color: #007bff;
   border-color: #007bff #007bff #007bff;
   color: #FFF;
   flex-grow: 1;
 }

 .btn-primary-pos:hover,
 .btn-primary-pos.hover {
   background-color: #0069d9;
   border-color: #0069d9;
   color: #FFF;
 }


.group {
  display: flex;
}

https://codepen.io/reijnemans/pen/qBdBGyK

Answer 2

使用 flexbox。了解 flex-grow、display:flex、align-items.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

使用元素 ui css 的一组页脚按钮

group of footer buttons with css using element ui

css

vue.js

vue-component

element-ui