Question

我正在使用带有引导程序3的网格列系统创建一个食物菜单，我正在尝试在菜单项和价格之间创建点引导。我有点工作，但我似乎无法让点引线延伸到项目的右侧，而是打破了界限并继续在菜单下面。这是我得到的：

我试过

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

您可以使用这两条规则执行.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: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."
}

Stack snippet

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

myObj = {
    "ratingBest": 10,
    "reviewCount": 1,
     "coordinate": {
     "latitude": "-7.2768",
     "longitude": "112.7927"
       }
    }
var latitudex = myObj.coordinate.latitude;
var longitudex = myObj.coordinate.longitude;

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

使用点引线作为带有引导网格的食物菜单

2 个答案: