Question

当我使用剪切时，它并没有像实际情况那样显示它，但我的想法是我试图让div显示这样的东西......但我失败了。我提到我需要将该图像放入div中，因为我使用php在指向下方的红色箭头和此箭头之间切换。但是为了把它放到片段中，我使用了一个在线资源。问题是我甚至无法在它们之间显示虚线（.target）。

＆＃13;

.target {
  background-color: transparent;
  border-right: 2px dotted black; 
  color: black;
  height: 50px;
  width: 3px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row" style="margin: 0 auto; text-align: center; height: 100%;">
  <div class="col-sm-6" style="width:50%;">
    <div class="stats-item" style="width:40%;">
      <h1>0</h1>
      <p>Clicks</p>
    </div>
  </div>
  <div class="target"></div>
  <div class="col-sm-6" style="width:50%;">
    <div class="stats-item" style="width:40%;">
      <div class="image" style="width: 30px;">
        <img src="https://app.klipfolio.com/images/resources/indicators/hd/ind-triangle-up-green.png" />
      </div>
      <p>vs 0 prev. 7 days</p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

.target占据了列之间的空间，因此它们不会彼此相邻。您需要设置position: absolute才能将其从网格流中取出。然后相应地定位它。（请注意，在此片段中，效果无法显示，因为可用空间非常有限，以至于默认col-xs-12类不会接管col-sm-6列。

＆＃13;

.target {
    background-color: transparent;
    border-right: 2px dotted black; 
    color: black;
    height: 50px;
    width: 3px;
    position: absolute;
    left: 50%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row" style="margin: 0 auto; text-align: center; height: 100%;">
  <div class="col-sm-6" style="width:50%;">
    <div class="stats-item" style="width:40%;">
      <h1>0</h1>
      <p>Clicks</p>
    </div>
  </div>
  <div class="target"></div>
  <div class="col-sm-6" style="width:50%;">
    <div class="stats-item" style="width:40%;">
      <div class="image" style="width: 30px;">
        <img src="https://app.klipfolio.com/images/resources/indicators/hd/ind-triangle-up-green.png" />
      </div>
      <p>vs 0 prev. 7 days</p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

为div.target创建另一列。

<div class="row" style="margin: 0 auto; text-align: center; height: 100%;">
  <div class="col-sm-2" >
    <div class="stats-item" style="width:40%;">
      <h1>0</h1>
      <p>Clicks</p>
    </div>
  </div>

  <div class="col-xs-1">
  <div class="target"></div>
  </div>

  <div class="col-sm-2" >
    <div class="stats-item" >
      <div class="image">
        <img src="https://app.klipfolio.com/images/resources/indicators/hd/ind-triangle-up-green.png" />
      </div>
      <p>vs 0 prev. 7 days</p>
    </div>
  </div>
</div>

和您的CSS

.target {
  border-right: 2px dotted black; 
  color: black;
  height: 100px;
  width: 1px;
}

见这里示例：http://codepen.io/ihemant360/pen/wWgoMW

无法正确显示某些元素

2 个答案: