使用點引導器與自舉網格的食物菜單

Question

我使用引導3的網格列系統創建食物菜單，並且我嘗試在菜單項和價格之間創建點領導。我有點工作，但我似乎無法讓點領導者延伸到該項目的右側，而是打破了界限，並繼續在菜單下。 這裏就是我得到：

我在CSS試圖

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

。我似乎能夠從打破阻止它的唯一辦法是縮短

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

你可以做一個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>

Answer 2

這會做的把戲嗎？ http://codepen.io/panchroma/pen/YZBZRx

正如你會看到重要的細節是我用過的虛線邊框樣式，並提出了一些修正，以你的HTML

我希望這有助於！

HTML

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

CSS

p.dots{ 
    border-bottom:1px #333 dotted; 
}