我需要帮助在 Bootstrap 中使用推和拉重新排序列,以实现 SEO 目的。最终输出如下图所示。现在我只需要在桌面 View 上切换左侧边栏和主要内容。我设法使用一堆 div 和 float 来做到这一点,但我决定尝试一下 bootstrap。谢谢!
HTML
<div class="container">
<div class="row">
<div class="col-sm-4 col-1 my-col">
Main Content (Middle)
</div>
<div class="col-sm-4 col-2 my-col">
Left Sidebar
</div>
<div class="col-sm-4 col-3 my-col">
Right Sidebar
</div>
</div>
</div>
CSS
.my-col{
line-height: 40px;
color:white;
text-align:center;
font-size: 20px;
}
.col-1{background:red}
.col-2{background:blue}
.col-3{background:green}
@media (min-width: 768px) {
.my-col{
line-height: 80px;
}
}
最佳答案
列排序是 bootstrap 框架的内置功能。欲了解更多信息,请访问here
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
这里的例子 codepen 享受:)
关于css - 在 Bootstrap 中重新排序 3 列以进行 SEO,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39068000/