Question

我还在学习Bootstrap 4所以可能会有一堂课，我不应该使用但是我试图让一些文字堆叠在一起并且无法获得它工作。

我的NavBar上方有一行，左边是徽标，右边是员工姓名/号码/安全组。我想要做的是拥有员工姓名 - 员工编号，然后是下面有他们所在的组。

我已尝试过将安全组置于<div>内使用<br />和<p>以尝试让它们堆叠但没有运气的几件事。

我正在使用弹性盒（我还没有完全理解），这样我就可以将员工信息对齐到行的底部，因为徽标与文本相比较高。

任何人都有任何关于如何在正确的列中获取文本的建议，如果这是我唯一的选择，我可以使用我可以做的表格吗？

<div class="container-fluid">
    <div class="row">
        <div class="col-4">
            <a href="@Url.Action("Index","Home")">
                <img class="header-logo" src="~/images/logo.png" />
            </a>
        </div>
        <div class="col-8 d-flex align-items-end justify-content-end">
            <span>@HttpContext.Current.Session["UserName"].ToString()</span> -
            <span class="header-employee-id">@HttpContext.Current.Session["UserId"].ToString()</span>
            <p>@HttpContext.Current.Session["SecurityGroup"].ToString()</p>
        </div>
    </div>
</div>

Answer 1

一种方法是使用flex-column。我假设你希望用户跨在一起，所以那些将被包装在div中。

<div class="container-fluid">
    <div class="row">
        <div class="col-4">
            <a href=")">
                <img class="header-logo" src="~/images/logo.png" />
            </a>
        </div>
        <div class="col-8 d-flex align-items-end justify-content-end flex-column">
            <div><span>UserName</span> - <span class="header-employee-id">UserId</span></div>
            <p>SecurityGroup</p>
        </div>
    </div>
</div>

Bootstrap无法堆叠文本

1 个答案: