Question

这是我正在建设的。这非常有效：https://jsfiddle.net/4xd47wcg/。主要目标是让点连接到价格而不是在单词之下。

当我添加引导程序以使其响应某些奇怪的原因时，点开始在单词下面看到：https://jsfiddle.net/619LLsqs/1/ 稍微改变了颜色以便于查看。对于我的生活，我无法弄清楚是什么导致了这个问题。有什么想法吗？

谢谢！

<p>
  <span class='descripcion'>Trócola</span>
  <span class='precio'>56´72</span>
</p>
<p>
  <span class='descripcion'>Junta la trócola</span>
  <span class='precio'>0´33</span>
</p>
<p>
  <span class='descripcion'>Gamusinos en oferta c/u</span>
  <span class='precio'>6´47</span>
</p>




* {margin:0;padding:0;border: 0 none;position: relative;}

html, body {
  background: gray;
  padding-top: 1rem;
  font-family: muli;
  font-weight: 300;
  font-style: italic;
  color: black;
}
p {
  background: inherit;
  width: 70%;
  max-width: 40rem;
  min-width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.5rem;
  color: #fff;
  padding-right: 4rem;
  margin-bottom: .5rem;
  color: black;
}
p:before {
  content: '';
  position: absolute;
  bottom: .4rem;
  width: 100%;
  height: 0;
  line-height: 0;
  border-bottom: 2px dotted #ddd;
}
.descripcion {
  background: inherit;
  display: inline;
  z-index: 1;
  padding-right: .2rem;
}
.precio {
  background: inherit;
  position: absolute;
  min-width: 4rem;
  bottom: 0;
  right: 0;
  padding-left: .2rem;
  text-align: right;
  z-index: 2;
}

h1 a {
  display: block;
  text-decoration: none;
  color: rgba(0,0,0,.55);
  margin-bottom: 1rem;
  text-align: center;
  transition: .5s;
}

Answer 1

问题在于.descripcion和.precio的背景色，在没有引导程序的情况下，它继承了grey的身体背景颜色，但是在引导小提琴中它继承了透明的背景色。

更新了小提琴https://jsfiddle.net/619LLsqs/2/

Bootstrap行抛出Code的问题

1 个答案: