javascript - div内に垂直線を追加する最も実用的な方法は何ですか?

原文 javascript jquery html css

div / boxがあります。そのdiv内に垂直線を作成しようとしています。
border-rightを使用してみましたが、何らかの理由で行が私のdivに収まるように伸びていません。

私のdivのクラスはsectionなので
.section {
    border-right: 2px solid #c9cacb;
}


HTML
<hr style="height: 100pt; visibility: hidden;" />
<div class="container summary">
    <div class="row">
        <div class="col-xs-1 section">
            <br>
            <p>
                Section
                    <br>
                <span class="section-num">2.2</span>

                <br>
                Exercise
            </p>
        </div>
        <div class="col-xs-3">
            <br>
            <div class="row cb-btns-row " style="background-color: white;">
                <div class="col-xs-3 col-xs-3 col-md-3 col-lg-3">
                    <div id="dd" class="wrapper-dropdown-1" tabindex="1">
                        <span class="summary-texts">Group A </span>

                        <ul class="dropdown">
                            <li><a class="group" id="group-a">Group A </a>

                            </li>
                            <li><a class="group" id="group-b">Group B </a>

                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <p style="text-align: left;" class="summary-texts">
                <br>
                Problem set: Same
                    <br>
                Start: 4/10/2015 2:00 pm
            </p>
        </div>
        <div class="col-xs-5">
            <br>
            <br>
            <br>
            <p style="text-align: left;" class="summary-texts">
                Students: 9/25
                    <br>
                Due: 4/10/2015 3:00 pm
            </p>
        </div>
        <div class="col-xs-1 student-submit">
            <br>
            <span class="student-submit-num">9/9</span>

            <br>
            STUDENTS
                <br>
            SUBMITTED
        </div>
        <div class="col-xs-1 avg-score">
            <br>
            <span class="avg-score-num">71 <small>% </small></span>

            <br>
            AVG SCORE
        </div>
        <div class="col-xs-1 hide-details">
            <br>
            <img src="http://s13.postimg.org/5xe0gy3pv/Screen_Shot_2015_05_26_at_11_40_40_AM.png" width="40">
            <br>
            HIDE
                <br>
            DETAILS
        </div>
    </div>
</div>

Here is my JSFiddle
div内に垂直線を追加する最も実用的な方法は何ですか?
答え
私はこのCSSを追加しました:

.section-row{
    overflow:hidden;
}
.section{
    margin-bottom:-9999px;
    padding-bottom:9999px;
}


そして新しいクラス

  <div class="row section-row">
        <div class="col-xs-1 section">


See it work here

これは、ブートストラップの列を同じ高さにするために一般的に受け入れられている方法です。

HTH、
-テッド
関連記事

javascript - 別のページからbutton.clickイベントをトリガーする

javascript - Jqueryで個別のアイテムをプッシュする[重複]

javascript - 1つの関数が実行された後にjquery関数を実行する

javascript - AngularJS:モデル値の切り替えはUIに影響しません

javascript - アニメーションの完了後にjquery関数を実行するにはどうすればよいですか?

javascript - 毎回コマンドを実行せずにCSSの変更を確認する方法

javascript - Jqueryで読み込まれたページのURLを変更する

javascript - ng-repeat内のng-modelの設定が機能しない

javascript - 1つのソースのみからイベントを抽出する方法

javascript - ng-repeat内で呼び出されたAngular $ broadcastが複数回起動する