Question

我正在编写一个使用嵌套引导列的页面。我正在使用push / pull让列在移动设备上切换位置，并且它工作得很好。但是，在桌面上我有一些奇怪的间距问题。嵌套列偏移到父列的右侧。

我已设置显示此行为的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

当您在bootstrap中使用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"

＆＃13;

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

＆＃13;

使用推/拉的Bootstrap嵌套列

2 个答案: