Bootstrap 4 Grid - выравнивание элементов ближе друг к другу

Question

Что-то новенькое в Bootstrap, и я с трудом пытаюсь совместить три элемента в ряду.Я пытаюсь поместить кнопку редактирования, значок, который является ссылкой, а затем шеврон, который открывает панель вместе в правом конце строки.Шеврон в порядке, но я не могу понять, как сблизить другие кнопки.

Вот код

<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

не используйте столбцы все время!Столбцы BS4 предназначены для рисования пробелов на экране, а не для позиционирования каждого элемента!

Используйте гибкие коробки каждый раз, когда вам нужно выровнять элементы.

<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>

Answer 2

Вы можете использовать новые 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