html - Bootstrap 4 Grid - 对齐元素彼此靠近

Question

Bootstrap 有点新，我很难在一行中对齐三个元素。我正在尝试放置一个编辑按钮，一个作为链接的图标，然后在行的右端一起打开面板的 V 形。雪佛龙很好，但我不知道如何让其他按钮靠得更近。

这是代码

<header class="card-header card-header-approval expensesheet-header">
  <div class="row">
    <div class="col-md-9">
        <label class="h6" for="StatusDisplayName">@Model.ExpenseSheets[i].AccountingCode</label>
    </div>

    <div class="col-md-1" style="padding-left: 2px;padding-right: 2px;">
        @Html.ActionLink("Edit", "EditExpenseSheet", "Project", new { id = Model.ExpenseSheets[i].Id })
    </div>

    <div class="col-md-1  justify-content-center">
      <a id="detailModal"
        href="#"
        class="fa fa-sticky-note fa-2x AddNoteClick">
      </a>
    </div>

    <div class="col-md-1 collapse-chevron text-right">
    <a data-toggle="collapse" class="collapsed" data-target="#expCollapsePanel_@i" href="#">
     <span class="fa fa-chevron-up" aria-hidden="true"></span></a>
    </div>
 </div>
</header>

理想情况下，我希望编辑按钮、注释图标和 V 形在行尾彼此相邻。我觉得这应该很容易，但我仍在弄清楚整个 Bootstrap 网格布局。提前致谢。

标签： htmlcssbootstrap-4

Answer 1

您可以使用新的 Bootstrap 4自动布局列。将col-auto“缩小”以适应其内容。将col“增长”以填充宽度。

<header class="card-header card-header-approval expensesheet-header">
    <div class="row">
        <div class="col-md">
            <label class="h6" for="StatusDisplayName">AccountingCode</label>
        </div>
        <div class="col-md-auto">
            Edit
        </div>
        <div class="col-md-auto justify-content-center">
            <a id="detailModal" href="#" class="fa fa-sticky-note fa-2x AddNoteClick">
            </a>
        </div>
        <div class="col-md-auto collapse-chevron text-right">
            <a data-toggle="collapse" class="collapsed" data-target="#expCollapsePanel_@i" href="#">
                <span class="fa fa-chevron-up" aria-hidden="true"></span></a>
        </div>
    </div>
</header>

演示：https ://www.codeply.com/go/8QhiaNoGSp