Bootstrap span 类无法按预期工作 [英] Bootstrap span classes not working as expected
本文介绍了Bootstrap span 类无法按预期工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我编写了我的第一个引导程序.
<头><link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="样式表"><身体><div class="row"> 列的第 1 级<div class="row"><div class="span6">Level 2</div><div class="span3">Level 2</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script></html>
我希望 div class 9 只占用 9 列而不是整个浏览器宽度.我希望 span6 和 span3 将占据 6 和 3 列并在同一行中.
但输出看起来像
因此行显示不正确(它们被剪切)并且行和列也没有得到尊重.(在 chrome 中，我可以看到级别 1 占用了整个浏览器宽度)2 span6 和 span3 类也是如此.它们占据了整个浏览器宽度.
解决方案
您在标题中引用了 bootstrap 3.1.1 css 文件，但是您在其中使用了 bootstrap 2 css 类(例如 span3)您的 html 代码.
使用 bootstrap 3 类代替，如下所述:http://getbootstrap.com/css/
例如使用 col-lg-3 而不是 span3.
试试这个:
<代码>...<div class="row"><div class="col-lg-9">列的级别 1</div>
<div class="row"><div class="col-lg-6">Level 2</div><div class="col-lg-3">Level 2</div>
