Question

我正在尝试为移动设备创建一个简单的页面有标题文字，然后是顶部的文字，底部的文字和手机的图像，它们都悬停着文字（在顶部和底部）。
我试图通过Twitter Bootstrap实现这一点，但我的结果还不够好，可能是因为我根本不理解CSS中的溢出。
所以这就是我想要实现的目标：http://i.imgur.com/ds2CC2m.png
在这里你可以看到发生了什么：http://plnkr.co/edit/t6w3MtoiD4KUuGe0mM10?p=preview
或者你可以在这里查看很多丑陋的代码：

    <style type="text/css">
        .text p {
            padding-left: 15px;
        }
    </style>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <div style="position: relative;">
        <div class="row" style="background-color:#E4F6FC;">
            <div class="col-md-3" style="margin:10px">
                <p>Logo</p>
            </div>
        </div>
        <div class="row " style="background-color:#E4F6FC;">
            <div class="col-md-3 " style="color:#00AAE3;width: 100%;padding-right:0;height: 100%;position:absolute;z-index: 11;top: 0;left: 0;margin-top: 15%">
                <p>My</p>
                <p>default</p>
                <p>text</p>
            </div>
            <div class="col-md-3" style="padding:0;height: 100%;top: 0;left: 0;margin-top:-5%;float:right;z-index: 12;">
                <img src="http://i.imgur.com/qYV93nS.png">
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 text" style="padding-top:10px;padding-bottom:10px;color:#FFFFFF;background-color:#00AAE3;padding-right:0;height: 100%;top: 0;left: 0;z-index: 10;top: 0;left: 0;margin-top:-45%">
                <p>and few</p>
                <p>lines of great</p>
                <p>lorem ipsum</p>
                <p>here</p>
                <button type="button" style="margin-left: 15px;border-radius: 20px;border-color: #FFFFFF;background: none;color:#FFFFFF;" class="btn">
                    AWESOME BUTTON
                    <i class="fa fa-angle-right"></i>
                </button>
            </div>
        </div>
    </div>

我为乱糟糟的而道歉，你已经看到了并且对你的眼睛造成了伤害：с

Answer 1

两个建议：

1）使你想要的手机和文字在同一个地方对齐：绝对，这样它总会保持在同一个地方。确保将z-align设置为正确，以便手机位于顶部。

2）我认为你的问题必须解决你的col-md不能在智能手机上工作的事实！它仅适用于md和更高的屏幕。要影响小于749像素的屏幕，请使用col-sm和col-xs。

新网格适用于12，因此请利用这一优势让您的行按照您想要的方式排列。例如：

<div class="col-lg-2 col-md-1 col-xs-1"></div>

希望这能让你走上正轨 - 不确定你想要得到什么。

如何为移动设备制作一个div超过两个div

1 个答案: