Question

我想使用bootstrap创建一个响应式z-layout页面。问题是当它进入移动设备时，布局是不同的。

以下是我的 HTML

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4"><img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" style="width:100%"></div>
                <div class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
            </div>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-8 z-first">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                <div class="col-md-4 z-second"><img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" style="width:100%"></div>
            </div>
        </div>
    </div>
</div>

请参考 without JS和with JS。如果没有JS，还有什么办法吗？

Answer 1

从未使用过Bootstrap，但imho，我发现html标记有点复杂，语义也很差。

我确定它并不完美，但我更愿意使用这个标记：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="Reset.css">
        <link rel="stylesheet" href="Style.css">
    </head>
    <body>
        <section>
            <img src='YourPicture.png'>
            </img>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </section>
        <section>
            <img src='YourPicture.png'>
            </img>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </section>
    </body>
</html>

这是一个准系统Style.css文件，它以您希望的方式处理响应式布局部分：

section
{
    clear: both;
    display: block;
}

img
{
    display: block;
}

p
{
    display: block;
}

section:first-child img
{
    float: left;
}

section:nth-child(2) img
{
     float: right;
}

@media (max-width: 768px)
{
    section:first-child img
    {
        width: 100%;
        float: none;
    }

    section:nth-child(2) img
    {
        width: 100%;
        float: none;
    }
}

没有Javascript：）。

如何创建响应式z-layout

1 个答案: