Bootstrap 4在单元格中对齐

Question

我目前正在为票证系统编写一个接口，该系统使用Bootstrap 4的网格系统来定位有关系统的组件。从下面的屏幕截图中可以看出，UI有两个容器流体div堆叠。顶部div完美对齐，第二个我正在努力。

我希望它像这样渲染（没有粉红色 - 粉红色显示两个cols）：

但它呈现如下：

呈现此代码的代码如下：

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

正如你所看到的那样，即使我有text-right指令，它也会在中间呈现<ul>。

我当然可以通过添加“float：right;”来实现它。到UL - 它正确地水平放置，然后它不再垂直对齐（它捕捉到div的顶部）。我已经在很多地方搜索过一个解决方案，但是所有人都指向使用导航栏导航，这在这种情况下是无关紧要的。

有没有办法让我的UL对齐其父div而不诉诸填充/边缘CSS黑客攻击？

Plunker链接：qazxsw poi

Answer 1

将文本对齐放在global-ticket-summary div上，如果不起作用则将其放在UL中。文本对齐仅适用于我认为的直接子元素

Answer 2

您可以使用flexbox来对齐内容。只需将此.flex-container类放入代码中即可右对齐子元素。

https://next.plnkr.co/plunk/y4EYmtpgwRvHkjuI

如果你是css的新手我会建议你去看看flexbox。

Answer 3

你想把ul放在col的右边。纠正我！如果我误解了你的问题。因此，您需要在style.css文件中执行以下操作，只需使用以下css代码替换即可。

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

Answer 4

使用flex实用程序进行引导4.将以下类添加到第一列（具有文本权限）：d-flex，justify-content-end。

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

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

它正如你想要的那样对齐。

这里的参考是bootstrap 4的flex实用程序的链接：

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