利用推/拉的引导嵌套列

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-4 col-md-4 col-md-pull-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>

更新演示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>