Bootstrap 4 выравнивается прямо в ячейке

Question

В настоящее время я пишу интерфейс для системы заявок, которая использует сеточную систему Bootstrap 4 для позиционирования компонентов системы.Как вы можете видеть на скриншоте ниже, в пользовательском интерфейсе есть два сложенных div-контейнера.Верхний div выравнивается идеально, второй я борюсь с ним.

Я хочу, чтобы он отображался так (без розового цвета - розовый цвет показывает два цвета):

однако рендеринг выглядит так:

Код, который отображает это следующим образом:

HTML:

<div class="container-fluid container-navbar">
    <div class="row navbar">
        <div class="col">
            logo goes here
        </div>
        <div class="col text-center help-desk">
            help desk.
        </div>
        <div class="col text-right">
            <i aria-hidden="true" class="fa fa-bars" id="settings-menu" ></i>
        </div>
    </div>
</div>
<div class="container-fluid">
  <div class="row ticket-summary-navbar">
    <div class="col text-right">
      <div class="global-ticket-summary">
        <ul>
          <li >
            <p class="ticketCount" >5</p>
            <p class="nameLabel" >User1</p>
          </li>
          <li >
            <p class="ticketCount" >3</p>
            <p class="nameLabel" >User2</p>
          </li>
          <li >
            <p class="ticketCount" >8</p>
            <p class="nameLabel" >User3</p>
          </li>
          <li >
            <p class="ticketCount" >6</p>
            <p class="nameLabel" >User4</p>
          </li>
          <li >
            <p class="ticketCount" >2</p>
            <p class="nameLabel" >User5</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="col">

    </div>
  </div>
</div>

CSS:

body{
    background-color: #ababab;
}

.navbar{
    color: white;
    background-color: rgba(58, 191, 195, 1);
    height: 75px;
    padding-left: 10px;
    padding-right: 10px;
}

.container-navbar{
    padding-left: 0px;
    padding-right: 0px;
    min-width: 490px;
}

.help-desk{
    font-size: 30px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

#settings-menu{
    font-size: 25px;
    cursor: pointer;
}

.ticket-summary-navbar{
    background-color: #f7f7f7;
    height: 90px;
}

.global-ticket-summary {
    font-family: 'Roboto', sans-serif;
    color: #1b1b1b;
    font-weight: 200;
}

.global-ticket-summary ul {
    list-style-type: none;
}

.global-ticket-summary ul li {
    text-align: center;
    float: left;
    width: 100px;
}

.global-ticket-summary ul li .ticketCount {
    font-size: 22pt;
    margin-bottom: -4px;
    cursor: pointer !important;
}

.global-ticket-summary ul li .nameLabel {
    font-size: 11pt;
    /*margin-bottom: 0;*/
    color: #656565;
    cursor: pointer !important;
}

Как вы можете видеть, он визуализирует

Answer 1

Используйте утилиты flex для начальной загрузки 4. Добавьте следующие классы в первый столбец (имеющий текстовое право): d-flex, justify-content-end .

...
    <div class="container-fluid">
      <div class="row ticket-summary-navbar">
        <div class="col d-flex justify-content-end">
...

Выравнивание по вашему желанию вправо.

Для справки здесь ссылка на утилиту flex для начальной загрузки 4: https://getbootstrap.com/docs/4.0/utilities/flex/

Answer 2

Вы можете использовать flexbox для выравнивания контента.Просто поместите этот класс .flex-container в ваш код, чтобы выровнять дочерние элементы по правому краю.

.flex-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

Если вы новичок в css, я рекомендую вам взглянуть на flexbox.

Answer 3

Вы хотите поместить ul в правую часть столбца.Исправь меня!если я неправильно понял ваш вопрос.Итак, вам нужно сделать следующее в вашем файле style.css, просто замените его следующим кодом CSS.

.global-ticket-summary ul {
    list-style-type: none;
    text-align: right!important;
}

.global-ticket-summary ul li {
    float: left;
    width: 100px;
}

Answer 4

Поместите текст выровненный в div global-ticket-summary, и если это не сработает, поместите его в UL.Выравнивание текста работает только для прямых дочерних элементов, которые я считаю