Bootstrap 3 使用媒体查询在一行中添加正确的列类？我正在使用 SASS

Question

我已经为此工作了好几个小时，并尝试了无数次 Google 搜索，但还没有找到可靠的解决方案。我正在使用 BootStrap 3 和 SASS 开发网站响应式布局（宽度 940px）。我一直在关注 BootStrap 3 在线文档，这非常有帮助。一切在桌面上运行良好，但是我很好奇，想知道是否可以使用媒体查询来操作移动布局。目前，我在容器中有两行，每行内有四列水平（请看图片）

当我在 iPhone 5 上的“纵向”视图中查看此布局时，我看到所有列都垂直堆叠，因为它们应该是好的。 （请看图）

问题

当我在 iPhone 5 上的“横向”中查看此布局时，所有两行的列都保留为“纵向视图”，但在屏幕上延伸，我希望看到“纵向视图”显示两列一起，而不是只在屏幕上伸展的一个。 （请看图）

我尝试了多种方法并遵循了 BootStrap 3 在线文档，但无法在 iPhone 5（横向视图）上显示两列。是的，表格视图运行良好......没有问题。

如果有人能指出正确的方向，我将不胜感激。

我一直在关注这个 Bootstrap 3 在线资源： http://getbootstrap.com/css/#grid-example-mixed-complete

我在这段代码中只包含了一行。我有一个“splash-wrapper”，它扩展了三个类，然后是“splash-wrapper”中的“splash-box”

这是我的代码 CSS：

    .splash-wrapper {   

        // XS
        @extend .col-xs-6;

        // SM
        @extend .col-sm-4;

        // MD
        @extend .col-md-3;

    }       

    .splash-box {

        //DROP SHADOW
        @extend .drop-shadow;

        //BORDER RADIUS
        @extend .border-radius;


        background-color:#ffffff;
        padding:.5em;
    }

HTML 代码：

<!--    CONTAINER       -->
    <div class="container">
        <!--    ROW     -->
        <div class="row"
            <!--    SPLASH-WRAPPER  --> 
            <div class="splash-wrap">
                <!--    SPLASH BOX      -->
                <div class="splash-box">
                    <p>It is a long established fact that a reader will be distracted by the 
                    readable content of a page when looking at its layout.It is a long established 
                    fact that a reader will be distracted by the readable content of a page 
                    when looking at its layout.</p>
                </div><!--  //SPLASH BOX    -->
            </div><!--  //SPLASH-WRAP   -->         

            <div class="splash-wrap">
                <div class="splash-box">
                    <p>It is a long established fact that a reader will be distracted by the 
                    readable content of a page when looking at its layout.It is a long established 
                    fact that a reader will be distracted by the readable content of a page 
                    when looking at its layout.</p>
                </div>
            </div><!--  //SPLASH-WRAP   -->         


            <div class="splash-wrap">
                <div class="splash-box">
                    <p>It is a long established fact that a reader will be distracted by the 
                    readable content of a page when looking at its layout.It is a long established 
                    fact that a reader will be distracted by the readable content of a page 
                    when looking at its layout.</p>
                </div>
            </div><!--  //SPLASH-WRAP   -->         


            <div class="splash-wrap">
                <div class="splash-box">
                    <p>It is a long established fact that a reader will be distracted by the 
                    readable content of a page when looking at its layout.It is a long established 
                    fact that a reader will be distracted by the readable content of a page 
                    when looking at its layout.</p>
                </div>
            </div><!--  //SPLASH-WRAP   -->         

        <!--    //ROW       -->     
    <!--        //CONTAINER     -->             

Answer 1

如果您不仅想以最佳方式解决问题，而且想防止未来出现问题，我会考虑花时间学习类似 Compass 的 Susy 库。起初它很令人困惑，但它是围绕制作响应式布局的概念设计的，所以一旦你通过了学习曲线，它就会相当令人兴奋。

我使用这个库在 1-2 天内创建单页响应式网站。看看吧：

http://susy.oddbird.net/

很棒的教程： http://www.zell-weekeat.com/a-complete-tutorial-to-susy/