ブートストラップグリッドのフードメニューにドットリーダを使用する

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

.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

にいくつかの修正を行ったということです私はこのことができます願っています！あなたはスタックがスニペットこれら2つのルール

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

でdisplay: flexトリックを行うことができ

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