引導程序：無法將按鈕與面板主體正確分開

Question

我是Bootstrap和HTML的新手。 我目前正在嘗試將我的“ 添加人”按鈕與面板主體分開，但是我不知道該如何實現。 以下是我的問題和當前代碼的屏幕截圖 ：

 <div class="panel panel-primary"> <div class="panel-heading clearfix"> <div class="panel-heading"> Manage Person </div> </div> </div> <div class="btn-group pull-right"> <a asp-action="Create" asp-controller="Persons" class="btn btn-primary btn-group-sm"> Add Person </a> </div> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <table class="table table-bordered table-striped table-hover"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> <th>Height</th> </tr> </thead> <tbody> <tr> <td>Rachel</td> <td>25</td> <td>Female</td> <td>175cm</td> </tr> <tr> <td>Thomas</td> <td>15</td> <td>Male</td> <td>165cm</td> </tr> <tr> <td>Jared</td> <td>40</td> <td>Male</td> <td>195cm</td> </tr> </tbody> </table> </div> </div> </div> 

Answer 1

按照以下建議使用clearfix div。 並添加margin-top: 10px; 在panel-body

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <div class="panel panel-primary"> <div class="panel-heading "> <div class="panel-heading"> Manage Person </div> </div> </div> <div class="btn-group pull-right" style="float: right;"> <a asp-action="Create" asp-controller="Persons" class="btn btn-primary btn-group-sm"> Add Person </a> </div> <div class="clearfix"></div> <div class="panel-body" style="margin-top: 10px;"> <div class="row"> <div class="col-md-12"> <table class="table table-bordered table-striped table-hover"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> <th>Height</th> </tr> </thead> <tbody> <tr> <td>Rachel</td> <td>25</td> <td>Female</td> <td>175cm</td> </tr> <tr> <td>Thomas</td> <td>15</td> <td>Male</td> <td>165cm</td> </tr> <tr> <td>Jared</td> <td>40</td> <td>Male</td> <td>195cm</td> </tr> </tbody> </table> </div> </div> </div> 

Answer 2

<div class="btn-group pull-right">
    <a asp-action="Create" style="margin-bottom:5px" asp-controller="Persons" class="btn btn-primary btn-group-sm">
        Add Person
    </a>
</div>

您可以使用margin-bottom。

Answer 3

這將是我解決此問題的方法：

• 給您的按鈕一個ID，並在CSS中添加底邊距：
  #yourButtonId{ margin-bottom: 10px; }

要么

• 將您的Button放在新的引導行中： <div class="row"> ---Your button code--- </div>