我正在尝试实现一个移动视图,其中该行的第一列位于第二列的顶部。
这是代码:
<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
如果实施或我的理解有误,请教育我。谢谢!
编辑:我尝试了推挽式引导程序功能,但是它所做的只是将第二列放在第一列之下(这不是我希望的),而是在切换到移动视图时将两列重叠,而不是放在彼此的顶部。
最佳答案
尝试通过推绝对位置。您可以使用Z-index在顶部获得正确的列。
<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>
关于html - 在第2列上覆盖第1列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43984256/