HTML按钮未占用父Div的全部宽度

Question

我的网站上有一个列出事件的区域。我有一个容器的父div和每个事件部分的div。当用户将鼠标悬停在该部分上时，左侧会弹出一个编辑和删除按钮：

问题在于按钮没有占用div的整个宽度，而只是占用了文本的长度。我知道有人问过其他问题，但是没有答案（例如添加box-sizing: border-box）对我有用。

HTML代码：

<div class="col-md-6 inline mb-4">  
    <h3 class="ml-2">Reminders:</h3>
    <div class="events-content-section ml-2">
        {% for reminder in reminders %}   
            <div class="mb-2" style="display: flex; align-items: center;">
                <ul class="reminderUl">
                    <li>
                        <span class="reminderSpan">
                            <button type="button" class="update-reminder btn btn-info" data-id="{% url 'update-reminder' reminder.pk %}"> 
                                <i class="fas fa-pencil-alt"></i>   
                            </button>
                        </span>
                        <span class="reminderSpan">
                            <button type="button" class="delete-reminder btn btn-danger" data-id="{% url 'delete-reminder' reminder.pk %}">
                                <i class="fas fa-trash-alt"></i>    
                            </button>
                        </span>
                        <button class="view-reminder btn btn-light" data-id="{% url 'view-reminder' reminder.pk %}">   
                            <h4>{{ reminder.title }}</h4>
                        </button>
                    </li>
                </ul> 
            </div>
        {% endfor %}    
    </div> 
</div>

Answer 1

由于您已经在使用Bootstrap，所以我建议使用btn-block类。