いくつかの要素を正しく表示できませんでした

Question

私は、実際にはそれを表示していませんでしたが、アイデアはこのようなものを表示するようにしようとしています。そのイメージをdivに入れる必要があると言います。なぜなら、PHPを使って、赤い矢印が下を向いていて、これを指すように切り替えるからです。しかし、スニペットに入れるために、私はオンラインソースを使用しました。問題は、それらの間に点線（.target）を表示することさえできないことです。

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

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

Answer 1

ブートストラップは、CSSでない限り、あなたはCSSドキュメントにHTMLドキュメントを接続する必要があります。参考までにhttp://www.w3schools.com/css/css_howto.aspを参照してください。

Answer 2

.targetは、列同士の間にスペースをとり、相互に隣接しないようにします。グリッドフローから取り出すには、position: absoluteを設定する必要があります。それに応じてそれを配置します。 （マインドは、利用可能なスペースは、デフォルトcol-xs-12クラスが列に対してオーバーcol-sm-6を取らないように制限されているため、このスニペットの内側効果は表示されませんことを。

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

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

Answer 3

別のを作ります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