垂直对齐按钮答案

【问题标题】：Align buttons vertically垂直对齐按钮
【发布时间】：2020-07-07 18:57:44
【问题描述】：

我在这里有这张卡片我希望我的按钮也可以单独显示并且垂直对齐并且也可以向右拉。我怎样才能做到这一点？她是演示卡

这是我的代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
   <div class="body">
     <div class="row clearfix">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
       <div class="card main-content">
        <div class="body">
         <div class="row clearfix">
            <div class="col-sm-12">
                <img id="studentimg" name="studentimg" alt="User Pic" src="/assets/images/student-avatar.png" align="left" width="150" height="150">
                <p>{{studentDetail.firstName}}&nbsp;{{studentDetail.lastName}}</p>
                <span class="pull-right" style="display: inline-block">
                    <button href="#" class="btn btn-primary pull-right" (click)="editStudent(studentDetail.studentKey)"> <span class="glyphicon glyphicon-pencil"></span>Edit</button>
                    <button href="#" class="btn btn-danger pull-right"><span class="glyphicon glyphicon-trash"></span>Delete</button>
                </span>
            </div>
         </div>
        </div>
       </div>
      </div>

</div>

【问题讨论】：

你在sn-p中使用了row这个类，你可以再次使用它
请将您的代码添加到sn-p中，所以有人很快解决了您的问题。
CSS 在哪里？
A simple search
@rob 按钮与您提供的链接中的上述演示中的按钮不对齐

标签： html css twitter-bootstrap-3

【解决方案1】：

我注意到，您添加了指向 bootstrap 3 的链接，在这种情况下，我可以提供类似 this 的链接

【讨论】：

【解决方案2】：

我可以为你提供这样的东西：

<div class="body">
    <div class="row">
        <div class="col-sm-10">
            <img id="studentimg" name="studentimg" alt="User Pic" src="/assets/images/student-avatar.png" align="left" width="150" height="150">
            <p>{{studentDetail.firstName}}&nbsp;{{studentDetail.lastName}}</p>
        </div>
        <div class="col-sm-2 buttons-alignment">
            <button class="btn btn-primary" (click)="editStudent(studentDetail.studentKey)"> 
               <span class="glyphicon glyphicon-pencil"></span>Edit</button>
            <button class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>Delete</button>
        </div>
    </div>
</div>

并使用如下样式：

   .buttons-alignment {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
    }

可以做一些你需要的更好的事情，但它需要了解关于你的任务的更多细节。

【讨论】：

其实这是正确的解决方案。感谢您的帮助:)
不客气 :) 需要说的是，如果它使用bootstrap 4，这是决定。
@ahsan 如果您选择切换到 bootsrat4，您可以使用内置类来实现您的布局：例如 codepen.io/anon/pen/yxaKPB ;)

【解决方案3】：

1-按钮没有href属性，改为href

2- 如果按钮在向右浮动的跨度中，则不需要向右拉...按钮必须在显示中：该跨度内的块不浮动

【讨论】：