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

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

Answer 1

将文本放在global-ticket-divmary div上，如果不行，将其放在UL中。文字对齐仅适用于我相信的直接子元素

Answer 2

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

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

如果您不熟悉CSS，我建议您看看flexbox。

Answer 3

您想将ul放在col的右侧。纠正我！如果我误解了你的问题。因此，您需要在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

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

$800000

它正在向右对齐。

作为参考，这里是引导4的flex实用工具的链接：https://getbootstrap.com/docs/4.0/utilities/flex/

Bootstrap 4在单元格中右对齐

4 个答案: