プッシュ/プルを使用したブートストラップネストしたカラム

Question

ネストされたブートストラップカラムを使用するページをコーディングしています。私はプッシュ/プルを使用して、列をモバイル上の場所に切り替えるようにしています。しかし、デスクトップ上で私はいくつかの奇妙な間隔の問題があります。ネストされた列は親列の右側にオフセットされます。

この動作を示すfiddleを設定しました。この例では、col-md-9が親divです。私はその行動を示すために金の背景を与えました。出力のサイズを変更すると、ネストされたdivが予想通りに所定の場所に流れ込みます。この問題に対する洞察は非常に高く評価されます。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-9" style="background: gold;"> 
 
    <div class="row"> 
 
     <!-- Large Video --> 
 
     <div class="col-xs-12 col-md-8 col-md-push-8" id="lgXbtvA"> 
 
      <script src="http://cdnapi.kaltura.com/p/1982211/sp/198221100/embedIframeJs/uiconf_id/40685101/partner_id/1982211"></script> 
 
      <!-- Outer div defines maximum space the player can take --> 
 
      <div style="width: 100%;display: inline-block;position: relative;"> 
 
       <!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% --> 
 
       <div id="dummy" class="vignette" style="margin-top: 56.25%;"></div> 
 
       <!-- the player embed target, set to take up available absolute space --> 
 
       <div id="kaltura_player_1507831819" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;"> 
 
       </div> 
 
      </div> 
 
      <h1><a href="articleimg.html" class="b">Large Headline</a></h1> 
 
      <div class="g citation">October 4, 2017 </div> 
 
      <p>Text text text text text</p> 
 
     </div> 
 
     <!--Videos Small --> 
 
     <div class="col-xs-12 col-md-4 col-md-pull-4 e" style="background: red; padding: 0;"> 
 
      <a href="#" class="c"> 
 
       <div class="artblock"> 
 
        <img src="images/650.jpg" alt="" /> 
 
        <div class="g">September 29, 2017</div> 
 
        <div>Saturday Stakes Preview Show</div> 
 
       </div> 
 
      </a> 
 
      <a href="#" class="c"> 
 
       <div class="artblock"> 
 
        <img src="images/xpress.jpg" alt="" /> 
 
        <div class="g">September 28, 2017</div> 
 
        <div>Breeders' Cup Xpress</div> 
 
       </div> 
 
      </a> 
 
     </div> 
 
    </div> 
 
</div>

編集：列は、デスクトップビュー上の適切な順序で表示されます、彼らはちょうど私が説明できない理由のためにオフセットされています。

Answer 1

あなたが使用する必要があるようにするため、ブートストラップでpullとpushクラスは、そのための代替columnを使用使用する場合：

col-xs-8 col-md-8 col-md-push-4代わりcol-xs-12 col-md-8 col-md-push-8

とcol-xs-12 col-md-4 col-md-pull-4

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="col-md-9" style="background: gold;"> 
 
    <div class="row"> 
 
     <!-- Large Video --> 
 
     <div class="col-xs-8 col-md-8 col-md-push-4" id="lgXbtvA"> 
 
      <script src="http://"></script> 
 
      <!-- Outer div defines maximum space the player can take --> 
 
      <div style="width: 100%;display: inline-block;position: relative;"> 
 
       <!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% --> 
 
       <div id="dummy" class="vignette" style="margin-top: 56.25%;"></div> 
 
       <!-- the player embed target, set to take up available absolute space --> 
 
       <div id="player" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;"> 
 
       </div> 
 
      </div> 
 
      <h1><a href="articleimg.html" class="b">Large Headline</a></h1> 
 
      <div class="g citation">October 4, 2017 </div> 
 
      <p>Text text text text text text </p> 
 
     </div> 
 
     <!--Videos Small --> 
 
     <div class="col-xs-4 col-md-4 col-md-pull-8" style="background: red; padding: 0;"> 
 
      <a href="#" class="c"> 
 
       <div class="artblock"> 
 
        <img src="images/650.jpg" alt=""> 
 
        <div class="g">September 29, 2017</div> 
 
        <div>Saturday Stakes Preview Show</div> 
 
       </div> 
 
      </a> 
 
      <a href="#" class="c"> 
 
       <div class="artblock"> 
 
        <img src="images/xpress.jpg" alt=""> 
 
        <div class="g">September 28, 2017</div> 
 
        <div>Breeders' Cup Xpress</div> 
 
       </div> 
 
      </a> 
 
     </div> 
 
    </div> 
 
</div>

の代わりに

col-xs-4 col-md-4 col-md-pull-8の

デモの更新Link

Answer 2

あなたの大きなビデオは

class="col-xs-12 col-md-8 col-md-push-4"

であるべきで、あなたの小さなビデオがあるべき

class="col-xs-12 col-md-4 col-md-pull-8"

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="col-md-9" style="background: gold;"> 
 
    <div class="row"> 
 
     <!-- Large Video --> 
 
     <div class="col-xs-12 col-md-8 col-md-push-4" id="lgXbtvA"> 
 
      <script src="http://"></script> 
 
      <!-- Outer div defines maximum space the player can take --> 
 
      <div style="width: 100%;display: inline-block;position: relative;"> 
 
       <!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% --> 
 
       <div id="dummy" class="vignette" style="margin-top: 56.25%;"></div> 
 
       <!-- the player embed target, set to take up available absolute space --> 
 
       <div id="player" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;"> 
 
       </div> 
 
      </div> 
 
      <h1><a href="articleimg.html" class="b">Large Headline</a></h1> 
 
      <div class="g citation">October 4, 2017 </div> 
 
      <p>Text text text text text text </p> 
 
     </div> 
 
     <!--Videos Small --> 
 
     <div class="col-xs-12 col-md-4 col-md-pull-8" style="background: red; padding: 0;"> 
 
      <a href="#" class="c"> 
 
       <div class="artblock"> 
 
        <img src="images/650.jpg" alt=""> 
 
        <div class="g">September 29, 2017</div> 
 
        <div>Saturday Stakes Preview Show</div> 
 
       </div> 
 
      </a> 
 
      <a href="#" class="c"> 
 
       <div class="artblock"> 
 
        <img src="images/xpress.jpg" alt=""> 
 
        <div class="g">September 28, 2017</div> 
 
        <div>Breeders' Cup Xpress</div> 
 
       </div> 
 
      </a> 
 
     </div> 
 
    </div> 
 
</div>