对齐项目 bootstrap/radzen 手风琴答案

【问题标题】：align items bootstrap/radzen accordion对齐项目 bootstrap/radzen 手风琴
【发布时间】：2022-11-11 02:11:30
【问题描述】：

我正在努力对齐项目，我一直在尝试对齐元素中间的按钮，以便它们在中心对齐并且彼此之间有一些空间。我有此代码的以下表示：

   <div class="col-5" style="margin-bottom: 10px">
                        <RadzenAccordion>
                            <Items>
                                <RadzenAccordionItem Text="WIP Listing" Style="text-align: center; align-items: center" Icon="account_balance_wallet" Selected="true">
                                    <div class="text-center" style="height: 230px; margin-top: 10px; align-items: center">
                                        <div class="align-items-center">
                                            <div class="row">
                                                <div class="col-sm-3">
                                                    <RadzenButton ButtonStyle="ButtonStyle.Success" Variant="Variant.Outlined" Shade="Shade.Dark" Style="min-width: 120px" Click="@(e => OnClickFilterProject("ALL"))">
                                                        <div>
                                                            <RadzenText TextStyle="TextStyle.H6" TextAlign="TextAlign.Center" Style="color: #3d8c40"><strong>ALL</strong> </RadzenText>
                                                            <RadzenText TextStyle="TextStyle.DisplayH5" TextAlign="TextAlign.Center" Style="color: #3d8c40"><b>@(Projects.Count())</b></RadzenText>
                                                        </div>
                                                    </RadzenButton>
                                                </div>
                                                <div class="col-sm-3">
                                                    <RadzenButton ButtonStyle="ButtonStyle.Success" Variant="Variant.Outlined" Shade="Shade.Dark" Style="min-width: 120px" Click="@(e => OnClickFilterProject("PA"))">
                                                        <div>
                                                            <RadzenText TextStyle="TextStyle.H6" TextAlign="TextAlign.Center" Style="color: #3d8c40"><strong>PA</strong> </RadzenText>
                                                            <RadzenText TextStyle="TextStyle.DisplayH5" TextAlign="TextAlign.Center" Style="color: #3d8c40"><b>@(Projects.Count(type => type.PaStaffNumber == PersonnelNo))</b></RadzenText>
                                                        </div>
                                                    </RadzenButton>
                                                </div>
                                                <div class="col-sm-3">
                                                    <RadzenButton ButtonStyle="ButtonStyle.Success" Variant="Variant.Outlined" Shade="Shade.Dark" Style="min-width: 120px" Click="@(e => OnClickFilterProject("PAM"))">
                                                        <div>
                                                            <RadzenText TextStyle="TextStyle.H6" TextAlign="TextAlign.Center" Style="color: #3d8c40"><strong>PAM</strong> </RadzenText>
                                                            <RadzenText TextStyle="TextStyle.DisplayH5" TextAlign="TextAlign.Center" Style="color: #3d8c40"><b>@(Projects.Count(type => type.PaMgrStaffNumber == PersonnelNo))</b></RadzenText>
                                                        </div>
                                                    </RadzenButton>
                                                </div>
                                                <div class="col-sm-3">
                                                    <RadzenButton ButtonStyle="ButtonStyle.Success" Variant="Variant.Outlined" Shade="Shade.Dark" Style="min-width: 120px" Click="@(e => OnClickFilterProject("PAS"))">
                                                        <div>
                                                            <RadzenText TextStyle="TextStyle.H6" TextAlign="TextAlign.Center" Style="color: #3d8c40"><strong>PAS</strong> </RadzenText>
                                                            <RadzenText TextStyle="TextStyle.DisplayH5" TextAlign="TextAlign.Center" Style="color: #3d8c40"><b>@(Projects.Count(type => type.PaSupervisorStaff == PersonnelNo))</b></RadzenText>
                                                        </div>
                                                    </RadzenButton>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </RadzenAccordionItem>
                            </Items>
                        </RadzenAccordion>
                    </div>

它会创建一个如下所示的图形：

有没有什么地方可以让我更好地理解如何在这里对齐？

【问题讨论】：

标签： html css bootstrap-5 radzen

【解决方案1】：

remove the "align-items-center"
and replace this with <div class="col-3">

【讨论】：

哪一个？我有 3 个。还是应该更换 3 个？
你实际上有 4 个，全部 4 个

【解决方案2】：

让我知道这是否解决了您的问题：

<div class="col-5" style="margin-bottom: 10px">
  <RadzenAccordion>
    <Items>
      <RadzenAccordionItem Text="WIP Listing" Style="text-align: center; align-items: center" Icon="account_balance_wallet" Selected="true">
        <div class="text-center" style="height: 230px; margin-top: 10px; align-items: center">
          <div class="d-flex align-items-center h-100">
            <div class="row">
              <div class="col-sm-3">
                <RadzenButton ButtonStyle="ButtonStyle.Success" Variant="Variant.Outlined" Shade="Shade.Dark" Style="min-width: 120px" Click="@(e => OnClickFilterProject(" ALL"))">
                  <div>
                    <RadzenText TextStyle="TextStyle.H6" TextAlign="TextAlign.Center" Style="color: #3d8c40"><strong>ALL</strong> </RadzenText>
                    <RadzenText TextStyle="TextStyle.DisplayH5" TextAlign="TextAlign.Center" Style="color: #3d8c40"><b>@(Projects.Count())</b></RadzenText>
                  </div>
                </RadzenButton>
              </div>
              <div class="col-sm-3">
                <RadzenButton ButtonStyle="ButtonStyle.Success" Variant="Variant.Outlined" Shade="Shade.Dark" Style="min-width: 120px" Click="@(e => OnClickFilterProject(" PA"))">
                  <div>
                    <RadzenText TextStyle="TextStyle.H6" TextAlign="TextAlign.Center" Style="color: #3d8c40"><strong>PA</strong> </RadzenText>
                    <RadzenText TextStyle="TextStyle.DisplayH5" TextAlign="TextAlign.Center" Style="color: #3d8c40"><b>@(Projects.Count(type => type.PaStaffNumber == PersonnelNo))</b></RadzenText>
                  </div>
                </RadzenButton>
              </div>
              <div class="col-sm-3">
                <RadzenButton ButtonStyle="ButtonStyle.Success" Variant="Variant.Outlined" Shade="Shade.Dark" Style="min-width: 120px" Click="@(e => OnClickFilterProject(" PAM"))">
                  <div>
                    <RadzenText TextStyle="TextStyle.H6" TextAlign="TextAlign.Center" Style="color: #3d8c40"><strong>PAM</strong> </RadzenText>
                    <RadzenText TextStyle="TextStyle.DisplayH5" TextAlign="TextAlign.Center" Style="color: #3d8c40"><b>@(Projects.Count(type => type.PaMgrStaffNumber == PersonnelNo))</b></RadzenText>
                  </div>
                </RadzenButton>
              </div>
              <div class="col-sm-3">
                <RadzenButton ButtonStyle="ButtonStyle.Success" Variant="Variant.Outlined" Shade="Shade.Dark" Style="min-width: 120px" Click="@(e => OnClickFilterProject(" PAS"))">
                  <div>
                    <RadzenText TextStyle="TextStyle.H6" TextAlign="TextAlign.Center" Style="color: #3d8c40"><strong>PAS</strong> </RadzenText>
                    <RadzenText TextStyle="TextStyle.DisplayH5" TextAlign="TextAlign.Center" Style="color: #3d8c40"><b>@(Projects.Count(type => type.PaSupervisorStaff == PersonnelNo))</b></RadzenText>
                  </div>
                </RadzenButton>
              </div>
            </div>
          </div>
        </div>
      </RadzenAccordionItem>
    </Items>
  </RadzenAccordion>
</div>

【讨论】：

我从你的代码中得到这个：i.imgur.com/Bk19Qtc.png
您是否将 Bootstrap CSS 和 JS 包含到您的项目中？
是的，这是一个 blazor 项目，它有引导程序 5.1.0
您能否创建一个snippet 以便我能够测试自己？
很抱歉，我在通过 sn-p 执行此操作方面非常糟糕，我正在解决它，但由于组件无法正常工作，我在将其放入 sn-p 部分时遇到了问题