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>

理想情况下，我想在行的末尾将编辑按钮，注释图标和雪佛龙紧挨着。我觉得这应该很容易，但我仍在计算整个Bootstrap网格布局。提前谢谢。

Answer 1

您可以使用新的Bootstrap 4 auto-layout列。 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

Answer 2

不要一直使用列！ BS4列设计用于在屏幕上绘制空格，而不是定位每个元素！

每次需要对齐项目时都使用flexbox。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,500i,700" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row my-4">
    <div class="col-12">
      <div class="jumbotron">
        <h1>Bootstrap 4 - Aligning elements closer to each other</h1>
        <p class="lead">by djibe.</p>
        <p class="text-muted">(thx to BS4)</p>
        <p class="lead">
          Tutorial
        </p>
        <ol>
          <li>Just use standard Bootstrap 4 classes and layout</li>
          <li>Create a div like this : <code>&lt;div class="d-flex align-items-center">&lt;/div></code></li>
          <li>In this div place all your elements each one placed in a semantic HTML5 tag (ex: span, p, div, i)</li>
          <li>When you want a set of elements to be aligned right, apply the BS4 class .ml-auto to the extreme left of these (in this case the #detailModal).<br><small> Or place all the elements in a div and apply ml-auto to this div<br> or use .justify-content-between on the container if there are only 2 elements in the div</small></li>
          <li>Apply margins for each element using BS4 mr-*, my-* or mx-* (Spacing utilities)</li>
          <li>Et voilà</li>
        </ol>

      </div>
      <div>

      </div>
    </div>
    <div class="col-12">
      <h2>
        Demo
      </h2>
      <div class="card">
        <div class="card-header">
          <div class="d-flex align-items-center">
            <p class="mb-0">
              Headend Equipment - Contract labour - $9962.00
            </p>
            <a id="detailModal" href="#" class="ml-auto mr-3 fa fa-sticky-note fa-2x AddNoteClick">
      </a>
            <a data-toggle="collapse" class="collapsed" data-target="#expCollapsePanel_@i" href="#">
     <span class="fa fa-chevron-up" aria-hidden="true"></span></a>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap 4 Grid - 使元素彼此更接近

2 个答案: