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

Posted 2023-02-23

【中文标题】使用元素 ui 的带有 css 的页脚按钮组

【英文标题】：group of footer buttons with css using element ui

【发布时间】：2020-05-23 06:53:45

【问题描述】：

我正在尝试使用 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

【问题讨论】：

一个完整的 sn-p 或 code-pen 代码示例将对我们有很大帮助...

【参考方案1】：

您可以使用弹性框轻松解决此问题。您的按钮必须随着内容的大小而增长：

<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

【参考方案2】：

使用弹性盒。阅读有关 flex-grow、display:flex、align-items 的信息。

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