Bootstrap 4在单元格中右对齐

Question

我目前正在为一个票证系统编写一个接口，它使用Bootstrap 4的网格系统来定位关于系统的组件。从下面的截图中可以看到，UI有两个容器-流体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;
}

正如您所看到的，它呈现在中间，即使我有text-right指令。

我当然可以通过将"float:right;“添加到UL来让它工作--它正确地水平定位，但是它不再垂直对齐(它会捕捉到div的顶部)。我已经在很多地方寻找了解决方案，但是所有的地方都指向使用Bootstrap的导航栏，这在本例中是不相关的。

有没有一种方法可以让UL直接对齐到它的父div，而不需要使用填充/空白CSS hack？

Plunkr链接也是：https://next.plnkr.co/plunk/y4EYmtpgwRvHkjuI

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

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