Question

我正在尝试实现移动视图，其中第一列的行位于第二列的顶部。

以下是代码：

<div class="container-fluid">
        <div class="row">
            <div class="col-md-4"><div class="loginpart"><img id ="icon" src="../images/athletics-logo.png"/><h2>Athletes Profiling </h2>
            <input type="button" class="login" name="login" value="Log In"/></div></div>
            <div class="col-md-8" style="padding: 0"><img id ="header"/><div class="mantra"><h2>Go Wolves!</h2></div></div>
        </div>
    </div>

现在问题是，我希望loginpart课程在移动设备上时可以在col-md-8之上。我试着寻找答案但没有结束。我不希望它叠在一起。

A | B = A goes on top of B

如果执行或我的理解有问题，请教育我。谢谢！

编辑：我尝试了推拉式引导程序功能，但它所做的就是将第二列放在第一列下面（这不是我希望的），而是在切换到移动设备时重叠两列视图，没有堆叠在一起。

Answer 1

使用push尝试绝对位置。您可以使用Z-index在顶部获取正确的列。

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4" style="position: absolute; z-index: 1;">
            <div class="loginpart">
                <img id ="icon" src="" />
                <h2 style="color: grey;">Athletes Profiling </h2>
                <input type="button" class="login" name="login" value="Log In"/>
            </div>
        </div>
        <div class="col-md-8 col-md-push-4">
            <img id="header" src="" />
            <div class="mantra">
                <h2 style="color: blue;">Go Wolves!</h2>
            </div>
        </div>
    </div>
</div>

＆＃13;

在第2列上叠加第1列

1 个答案: