Question

我在这里有此卡，我希望我的按钮也分别显示并垂直对齐，并且也向右拉。我该如何实现？她的演示卡

这是我的代码

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

Answer 1

我可以为您提供以下信息：

<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-arround;
        align-items: flex-start;
    }

可以做一些您需要的更好的事情，但是需要了解有关您任务的更多详细信息。

Answer 2

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

Answer 3

在按钮上添加以下样式：

button {
  display : block;
}

Answer 4

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

如果2个按钮位于向右浮动的跨度中，则不需要向右拉...按钮必须在显示中：阻止该范围内的块不浮动

垂直对齐按钮

4 个答案: