无法将按钮组中的按钮对齐到 MVC 的顶部

Question

我很难将左侧按钮中的文本移到顶部（风险级别 3）。它是 MVC 中的 Web 应用程序，我在引导程序中使用按钮组。我试过垂直对齐和顶部：0。但仍然没有运气。

我在检查元素时尝试了很多方法，但都没有运气。其他两个按钮中的 span 标签似乎是全宽的。但最左边按钮中的 span 标签似乎只是文本的宽度。

代码：

 @foreach (GRATT.DTO.ClinicalAreas ca in Model.ClinicalAreasList)
                    {
                        <div class="btn-group col-lg-4" role="group" aria-label="First group">
                            <div class="btn-toolbar" role="toolbar"  style="width:100%" aria-label="Toolbar with button groups">
                                <button type="button" id="btnClinical" class="btn btn-success btn-block" onclick="GetId(this)">
                                    <h4>Risk Level: @ca.ClinicaLevel</h4>
                                    <span>@ca.ClinicalDescription</span>
                                </button>
                            </div>
                        </div>

Answer 1

有多种方法可以解决这个问题，下面是一个css flex-box解决方案， 因为按钮有一个 id 选择器，所以我用它来设置按钮的样式。

#btnClinical {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}