在手机上给div添加断点答案

【问题标题】：Add breakpoint to div on mobile phone在手机上给div添加断点
【发布时间】：2017-02-27 13:05:51
【问题描述】：

我刚刚发现/开始学习媒体查询。我很难适应它。我正在寻找以下示例/一些帮助。

CSS

.col-left{
    height:300px;
    background:red; 
}

.col-right{
    height:300px;
    background:yellow;      
}
.icon-container{
    padding:20px 20px;
    background-color:blue;
    height:300px;
}
.heading-container{
    padding:20px 20px;
    background-color:black;
    height:300px;   
     font-size: 18px;
    letter-spacing: .5px;
    text-shadow: 2px 2px 8px #141415;
    font-weight: 900;
    color:white;
}

这是我的带有 Bootstrap 的 HTML

<div class="container">
    <div class="row">
        <div class="col-md-6 col-xs-6 col-left">
            <div class="row item-container">
                <div class="col-md-4 col-xs-4 icon-container">
                    <i class="fa fa-usd fa-3x"></i>
                </div><!--/icon-container -->
                <div class="col-md-8 col-xs-8 heading-container">
                    <p>Loren Ipsum This is some random text</p>
                </div><!--/heading-container -->
            </div><!--/.row item-container -->
        </div><!--/col6 -->

        <div class="col-md-6 col-xs-6 col-right">
        </div><!--/col6 -->
    </div><!--/row -->    
</div><!--/container -->

输出桌面

桌面输出很好，可以按我想要的方式显示。

移动输出

在移动设备上查看上述代码时出现问题。在移动设备上查看时，我得到以下输出：

上面的输出是错误的，因为我希望视口在黑色标题 div 之后中断。我想获得如下图所示的移动输出：

期望的输出

如果有人能在这里指出正确的方向，将不胜感激。我尝试关注以下tutorial via w3schools，但没有成功。

如有任何帮助，我们将不胜感激。

【问题讨论】：

您可能想阅读getbootstrap.com/css/#grid。特别是它如何在不同的屏幕尺寸上工作。（定义它应该适用的screensixze的类的一部分：xs，sm，md，lg）
@RMo 谢谢！所以，如果我理解正确的话 - 如果使用正确，引导程序消除了对媒体查询的需求？

标签： css html twitter-bootstrap responsive-design

【解决方案1】：

您正在使用引导程序：因此内置类将帮助您：

看看这个：

<div class="container">
<div class="row">
    <div class="col-md-6 col-xs-12 col-left">
        <div class="row item-container">
            <div class="col-md-4 col-xs-4 icon-container">
                <i class="fa fa-usd fa-3x"></i>
            </div><!--/icon-container -->
            <div class="col-md-8 col-xs-8 heading-container">
                <p>Loren Ipsum This is some random text</p>
            </div><!--/heading-container -->
        </div><!--/.row item-container -->
    </div><!--/col6 -->

    <div class="col-md-6 col-xs-12 col-right">
    </div><!--/col6 -->
</div><!--/row -->

Fiddle

【讨论】：

谢谢阿夫萨尔！所以你是说通过正确使用引导程序我不需要编写媒体查询......？
是的，但是您可以编写一些调整。

【解决方案2】：

尝试将.col-left 和.col-right 的col-xs-* 更改为col-xs-12

【讨论】：