Question

这是后续行动：Using dot leaders for a food menu with bootstrap grids

我正在使用带有引导程序3的网格列系统创建食物菜单，并且我在菜单项和价格之间创建了点引线。感谢用户LGSon我正在使用

display:flex;

这是诀窍，但是现在，边缘词似乎正在以不同的方式切断点头，这取决于有多少单词。一个词没有被切断，之后似乎有大约10px（这些是近似的，而不是确切的）。我的目标是使点阵领先完全均匀。这是什么形象：

这是我的代码。我很抱歉，如果时间太长，我会尽量保持简短。如果有人可以提供帮助，我会很感激。

<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>
       <p class="item dots">Whole Wheat</p>
       <p class="item dots">Silician</p>
       <p class="item dots">Silician Special</p>
       <p class="item dots">Chicago Style</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>
       <p class="item">$13.50</p>
       <p class="item">$13.50</p>
       <p class="item">$13.50</p>
       <p class="item">$13.50</p>       
     </div>
     <div class="col-xs-2">
       <p class="item">$11.99</p>
       <p class="item">$12.99</p>
       <p class="item">$15.99</p>
       <p class="item">$12.99</p>
       <p class="item">$12.99</p>
       <p class="item">$12.99</p>
       <p class="item">$12.99</p>     
     </div>
     <div class="col-xs-2">
       <p class="item">$12.99</p>
       <p class="item">$13.99</p>
       <p class="item">$17.99</p>
       <p class="item">$13.99</p>
       <p class="item">$15.99</p>
       <p class="item">$20.00</p>
       <p class="item">$14.99</p>      
     </div>
  </div>
</div>

<style> 
.dots {
  display: flex;
}

.dots::after {
  white-space: nowrap;
  overflow: hidden;
  direction: rtl;
  content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .       . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."
}
</style>

<!-- Matches Height in between divs--><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js">

$(function() {
   $('.item').matchHeight(false);

   //Make links '.active' in Handlebars
   var url = window.location.href;
      $('nav li').find('.active').removeClass('active');
      $('nav li a').filter(function(){
         return this.href == url;
    }).parent().addClass('active');
});
</script>

Answer 1

一种方法是使用伪元素来绘制点，将文本包装在一个元素中，使其具有与页面背景匹配的.dots { display: flex; position: relative; } .dots span { background: white; padding: 0 15px 0 0; } .dots::after { white-space: nowrap; overflow: hidden; direction: rtl; content: ""; border-bottom: 1px dotted black; position: absolute; bottom: 5px; left: 0; right: 0; z-index: -1; }颜色，并将点放在该元素下面的背景中颜色。

<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"><span>Cheese</span></p>
      <p class="item dots"><span>White</span></p>
      <p class="item dots"><span>Special</span></p>
      <p class="item dots"><span>Whole Wheat</span></p>
      <p class="item dots"><span>Silician</span></p>
      <p class="item dots"><span>Silician Special</span></p>
      <p class="item dots"><span>Chicago Style</span></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>
      <p class="item">$13.50</p>
      <p class="item">$13.50</p>
      <p class="item">$13.50</p>
      <p class="item">$13.50</p>
    </div>
    <div class="col-xs-2">
      <p class="item">$11.99</p>
      <p class="item">$12.99</p>
      <p class="item">$15.99</p>
      <p class="item">$12.99</p>
      <p class="item">$12.99</p>
      <p class="item">$12.99</p>
      <p class="item">$12.99</p>
    </div>
    <div class="col-xs-2">
      <p class="item">$12.99</p>
      <p class="item">$13.99</p>
      <p class="item">$17.99</p>
      <p class="item">$13.99</p>
      <p class="item">$15.99</p>
      <p class="item">$20.00</p>
      <p class="item">$14.99</p>
    </div>
  </div>
</div>

    if (user != null) {
        DatabaseReference ref = FirebaseDatabase.getInstance()
                .getReference("users").child(user.getUid());

        ref.addListenerForSingleValueEvent(...);
    }

Answer 2

只需将white-space: nowrap添加到dots规则

即可

$(function() {
   $('.item').matchHeight(false);

   //Make links '.active' in Handlebars
   var url = window.location.href;
      $('nav li').find('.active').removeClass('active');
      $('nav li a').filter(function(){
         return this.href == url;
    }).parent().addClass('active');
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
       <p class="item dots">Whole Wheat</p>
       <p class="item dots">Silician</p>
       <p class="item dots">Silician Special</p>
       <p class="item dots">Chicago Style</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>
       <p class="item">$13.50</p>
       <p class="item">$13.50</p>
       <p class="item">$13.50</p>
       <p class="item">$13.50</p>       
     </div>
     <div class="col-xs-2">
       <p class="item">$11.99</p>
       <p class="item">$12.99</p>
       <p class="item">$15.99</p>
       <p class="item">$12.99</p>
       <p class="item">$12.99</p>
       <p class="item">$12.99</p>
       <p class="item">$12.99</p>     
     </div>
     <div class="col-xs-2">
       <p class="item">$12.99</p>
       <p class="item">$13.99</p>
       <p class="item">$17.99</p>
       <p class="item">$13.99</p>
       <p class="item">$15.99</p>
       <p class="item">$20.00</p>
       <p class="item">$14.99</p>      
     </div>
  </div>
</div>

<!-- Matches Height in between divs--><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>

使用Dot Leaders获取带有flex *跟进的食物菜单

2 个答案: