考虑这个页脚:
<footer id="footer" class="dark" style="background-color:#220E2F !important;">
<div id="footer-container_k" style="margin: auto; display:block;" class="row">
<div class="col-md-2 col-xs-6 col-md-offset-2" style="position: relative; left:8%;" id="first">
<div class="buffer">
<a href="/about"><p>About</p></a>
<!--<a href="/careers"><p>Careers</p></a>-->
<a href="/press"><p>Press</p></a>
<a href="/blog"><p>Blog</p></a>
</div>
</div>
<div class="col-md-2 col-xs-6" style="position: relative; left:2%;" id="second">
<div class="buffer">
<a href="/contact"><p>Contact</p></a>
<a href="https://support.domeha.com/hc/en-us" target="_blank"><p>Support</p></a>
<a href="http://www.elexausa.com/" target="_blank"><p>Elexa USA</p></a>
<a href="#" id="footer_modal_button"></a>
</div>
</div>
<div class="col-md-2 col-xs-6" style="position: relative; right:4%;" id="third">
<div class="buffer">
<a href="/shop"><p>Z-Wave Products</p></a>
<a href="https://domeha.com/guardian" target="blank" ><p>Guardian Products</p></a>
<a href="/how-tos"><p>How-Tos</p></a>
<!--<a href="/news" target="blank" ><p>Dome News</p></a>-->
</div>
</div>
<div class="col-md-2 col-xs-6" style="position: relative; right:10%;" id="last">
<div class="buffer">
<a href="https://www.youtube.com/channel/UCuqjZpsNcaWkbH6T1_PTQ3Q" target="blank" ><p>YouTube</p></a>
<a href="https://www.facebook.com/DomeByElexa" target="blank" ><p>Facebook</p></a>
<a href="https://twitter.com/DomeByElexa" target="blank" ><p>Twitter</p></a>
<a href="https://www.linkedin.com/company/16181754"target="blank" ><p>LinkedIn</p></a>
</div>
</div>
</div>
我如何重构这个以折叠成两列而不是一列没有定位它们,就像我现在一样?定位似乎很容易,似乎很容易打破。
答案 0 :(得分:0)
删除您添加的所有额外样式,它们将堆叠。但是由于堆叠,订单会出错。要重新排序尝试推送和拉动方法,先移动。
http://www.bootply.com/DoMgBuRpDj
<div class="col-md-2 col-xs-6 col-md-push-2" id="third">..</div>
<div class="col-md-2 col-xs-6 col-md-pull-2" id="second">...</div>