ブートストラップのタイムラインの修正

Question

私はブートストラップのタイムラインを作成していますが、モバイルまたはスモールスクリーンのデバイスで問題なく動作しています。しかし、それは大きなスクリーンデバイスでいくつかの問題を抱えています。 https://codepen.io/irshad437/pen/rLvxxaでそれをチェックしてください。ウィンドウのサイズを変更して機能をチェックしてみてください。モバイルデバイスと同じように動作するはずです。
は親切codepen上でそれを確認します（特定のリンクで）

コード：

<div class="panel panel-default"> 
    <!-- /.panel-heading --> 
    <div class="panel-body"> 
    <ul class="timeline"> 
     <li class="timeline-inverted"> 
     <div class="timeline-badge warning"><i class="fa fa-credit-card"></i> 
     </div> 
     <div class="timeline-panel"> 
      <div class="timeline-heading"> 
      <h4 class="timeline-title">Lorem ipsum dolor</h4> 
      </div> 
     </div> 
     </li> 

     <li class="timeline-inverted"> 
     <div class="timeline-badge warning"><i class="fa fa-credit-card"></i> 
     </div> 
     <div class="timeline-panel"> 
      <div class="timeline-heading"> 
      <h4 class="timeline-title">Lorem ipsum dolor</h4> 
      </div> 
     </div> 
     </li> 

     <li class="timeline-inverted"> 
     <div class="timeline-badge warning"><i class="fa fa-credit-card"></i> 
     </div> 
     <div class="timeline-panel"> 
      <div class="timeline-heading"> 
      <h4 class="timeline-title">Lorem ipsum dolor</h4> 
      </div> 
     </div> 
     </li> 

     <li class="timeline-inverted"> 
     <div class="timeline-badge warning"><i class="fa fa-credit-card"></i> 
     </div> 
     <div class="timeline-panel"> 
      <div class="timeline-heading"> 
      <h4 class="timeline-title">Lorem ipsum dolor</h4> 
      </div> 
     </div> 
     </li> 

     <li class="timeline-inverted"> 
     <div class="timeline-badge warning"><i class="fa fa-credit-card"></i> 
     </div> 
     <div class="timeline-panel"> 
      <div class="timeline-heading"> 
      <h4 class="timeline-title">Lorem ipsum dolor</h4> 
      </div> 
     </div> 
     </li> 

     <li class="timeline-inverted"> 
     <div class="timeline-badge warning"><i class="fa fa-credit-card"></i> 
     </div> 
     <div class="timeline-panel"> 
      <div class="timeline-heading"> 
      <h4 class="timeline-title">Lorem ipsum dolor</h4> 
      </div> 
     </div> 
     </li> 

     <li class="timeline-inverted"> 
     <div class="timeline-badge warning"><i class="fa fa-credit-card"></i> 
     </div> 
     <div class="timeline-panel"> 
      <div class="timeline-heading"> 
      <h4 class="timeline-title">Lorem ipsum dolor</h4> 
      </div> 
     </div> 
     </li> 

     <li class="timeline-inverted"> 
     <div class="timeline-badge warning"><i class="fa fa-credit-card"></i> 
     </div> 
     <div class="timeline-panel"> 
      <div class="timeline-heading"> 
      <h4 class="timeline-title">Lorem ipsum dolor</h4> 
      </div> 
     </div> 
     </li> 

     <li class="timeline-inverted"> 
     <div class="timeline-badge warning"><i class="fa fa-credit-card"></i> 
     </div> 
     <div class="timeline-panel"> 
      <div class="timeline-heading"> 
      <h4 class="timeline-title">Lorem ipsum dolor</h4> 
      </div> 
     </div> 
     </li> 

     <li class="timeline-inverted"> 
     <div class="timeline-badge warning"><i class="fa fa-credit-card"></i> 
     </div> 
     <div class="timeline-panel"> 
      <div class="timeline-heading"> 
      <h4 class="timeline-title">Lorem ipsum dolor</h4> 
      </div> 
     </div> 
     </li> 
    </ul> 
    </div> 
    <!-- /.panel-body --> 
</div> 

をCSS：

/* Timeline.css */ 
.timeline { 
    position: relative; 
    padding: 20px 0 20px; 
    list-style: none; 
} 

.timeline:before { 
    content: " "; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 40px; 
    width: 8px; 
    margin-left: -1.5px; 
    background-color: #cccccc; 
} 

.timeline > li { 
    position: relative; 
    margin-bottom: 20px; 
} 

.timeline > li:before, 
.timeline > li:after { 
    content: " "; 
    display: table; 
} 

.timeline > li:after { 
    clear: both; 
} 

.timeline > li:before, 
.timeline > li:after { 
    content: " "; 
    display: table; 
} 

.timeline > li:after { 
    clear: both; 
} 

.timeline > li > .timeline-panel { 
    float: left; 
    position: relative; 
    width: 46%; 
    padding: 30px 30px 20px 0px; 
} 

.timeline > li > .timeline-panel:before { 
    content: " "; 
    display: inline-block; 
    position: absolute; 
    top: 26px; 
    right: -15px; 
} 

.timeline > li > .timeline-panel:after { 
    content: ""; 
    display: inline-block; 
    position: absolute; 
    top: 27px; 
    right: -14px; 
    border-top: 14px solid transparent; 
    border-right: 0 solid #fff; 
    border-bottom: 14px solid transparent; 
    border-left: 14px solid #fff; 
} 

.timeline > li > .timeline-badge { 
    z-index: 100; 
    position: absolute; 
    top: 16px; 
    left: 17px; 
    width: 50px; 
    height: 50px; 
    margin-left: 0px; 
    border-radius: 50% 50% 50% 50%; 
    text-align: center; 
    font-size: 1.4em; 
    line-height: 50px; 
    color: #fff; 
    background-color: #999999; 
} 

.timeline > li.timeline-inverted > .timeline-panel { 
    float: right; 
} 

.timeline > li.timeline-inverted > .timeline-panel:before { 
    right: auto; 
    left: -15px; 
    border-right-width: 15px; 
    border-left-width: 0; 
} 

.timeline > li.timeline-inverted > .timeline-panel:after { 
    right: auto; 
    left: -14px; 
    border-right-width: 14px; 
    border-left-width: 0; 
} 

.timeline-badge.primary { 
    background-color: #2e6da4 !important; 
} 

.timeline-badge.success { 
    background-color: #3f903f !important; 
} 

.timeline-badge.warning { 
    background-color: #f0ad4e !important; 
} 

.timeline-badge.danger { 
    background-color: #d9534f !important; 
} 

.timeline-badge.info { 
    background-color: #5bc0de !important; 
} 

.timeline-title { 
    margin-top: 0; 
    color: inherit; 
} 

.timeline-body > p, 
.timeline-body > ul { 
    margin-bottom: 0; 
} 

.timeline-body > p + p { 
    margin-top: 5px; 
} 

@media(max-width:767px) { 
    ul.timeline:before { 
     left: 40px; 
    } 

    ul.timeline > li > .timeline-panel { 
     width: calc(100% - 90px); 
     width: -moz-calc(100% - 90px); 
     width: -webkit-calc(100% - 90px); 
    } 

    ul.timeline > li > .timeline-badge { 
     top: 16px; 
     left: 17px; 
     margin-left: 0; 
    } 

    ul.timeline > li > .timeline-panel { 
     float: right; 
    } 

    ul.timeline > li > .timeline-panel:before { 
     right: auto; 
     left: -15px; 
     border-right-width: 15px; 
     border-left-width: 0; 
    } 

    ul.timeline > li > .timeline-panel:after { 
     right: auto; 
     left: -14px; 
     border-right-width: 14px; 
     border-left-width: 0; 
    } 
} 

Answer 1

あなたは.timeline-panel767pxまでの解像度のための計算された幅を与えています。他のデバイスの場合、幅は46%です。これはタイムラインパネルがアイコンの横に整列していない理由です。

ソリューション＃1

すべてのデバイスのタイムラインパネルの計算幅を与えてみます。したがって、(min-width:767px)のcalcを削除し、トップ宣言に追加してください。

ul.timeline > li > .timeline-panel { 
    float: left; 
    position: relative; 
    width: 46%; // remove this or can be fallback 
    padding: 30px 30px 20px 0px; 
    width: calc(100% - 90px); 
    width: -moz-calc(100% - 90px); 
    width: -webkit-calc(100% - 90px); 
} 

溶液＃2

削除(min-width:767px)で.timeline-panelの幅とトップの宣言を更新し、

@media(max-width:767px) { 
    //remove 
    /*ul.timeline > li > .timeline-panel { 
     width: calc(100% - 90px); 
     width: -moz-calc(100% - 90px); 
     width: -webkit-calc(100% - 90px); 
     } */ 
} 

.timeline > li > .timeline-panel { 
    float: left; 
    position: relative; 
    width: 100%; 
    padding: 30px 30px 20px 100px; 
} 

私はこのアプローチを好みます。これはコードペンです。 https://codepen.io/anon/pen/bZrqGO

ありがとうございました！