使用點領導與食品菜單柔性*後續

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

一種方法是使用一個僞元素繪製點代替，包裹中，給它相匹配的頁面背景background色元素文本和位置點該元素的下方與背景顏色。

.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>

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>