css - 将点 Bootstrap 符用于带有 Bootstrap 网格的食物菜单

Question

我正在使用带有 bootstrap 3 的网格列系统创建食物菜单，并且我正在尝试在菜单项和价格之间创建点 Bootstrap 符。我有点让它工作，但我似乎无法让点领导者延伸到元素的右侧，而是它打破了这条线并继续在菜单下。这是我得到的:

我试过了

display:block; display:inline-block; display:inline; 

在 CSS 中。我似乎能够阻止它破坏的唯一方法是缩短

content: '...' 

有什么方法可以让它发挥作用，还是我已将内容放在表格中或使用列表项？

这是我的其余代码，如果有人可以提供帮助，我将不胜感激，谢谢。

 <div class="row>
         <div class="col-xs-6">
              <p class="item dots">Cheese</p>
              <p class="item dots">White</p>
              <p class="item dots">Special</p>
         </div>

         <div class=col-xs-2>
             <p class="item">$8.99</p>
             <p class="item">$9.99</p>
             <p class="item">$13.50</p>
         </div>

         </div class=col-xs-2>
             <p class="item">$10.99</p>
             <p class="item">$11.99</p>
             <p class="item">$15.50</p>
         </div>

         </div class=col-xs-2>
             <p class="item">$12.99</p>
             <p class="item">$13.99</p>
             <p class="item">$17.50</p>
         </div>
    </div>

    .dots::after {
       display: inline-flex;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: clip;
       content: 
        " . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . "
     }

Answer 1

你可以用这 2 条规则做一个 display:flex 技巧

.dots {
  display: flex;
}
.dots::after {
  white-space: nowrap;
  overflow: hidden;
  direction: rtl;
  content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."
}

堆栈片段

.dots {
  display: flex;
}
.dots::after {
  white-space: nowrap;
  overflow: hidden;
  direction: rtl;
  content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class=" col-xs-6 ">
      <p class="item dots ">Cheese</p>
      <p class="item dots ">White</p>
      <p class="item dots ">Special</p>
    </div>
    <div class="col-xs-2">
      <p class="item ">$8.99</p>
      <p class="item ">$9.99</p>
      <p class="item ">$13.50</p>
    </div>
    <div class="col-xs-2">
      <p class="item ">$10.99</p>
      <p class="item ">$11.99</p>
      <p class="item ">$15.50</p>
    </div>
    <div class="col-xs-2">
      <p class="item ">$12.99</p>
      <p class="item ">$13.99</p>
      <p class="item ">$17.50</p>
    </div>
  </div>
</div>