html – 响应式Twitter引导程序中的两列项目符号列表
发布时间:2020-12-14 19:44:54 所属栏目:资源 来源:网络整理
导读:这是我第一次涉足Twitter Bootstrap.在这里看一下这个模板: http://twitter.github.com/bootstrap/examples/hero.html 在其中一个标题下面,我想将长ul分成两列: * item1 * item4 * item2 * item5 * item3 * item6 它可以是代码中的两个单独的 ul,它只需要
这是我第一次涉足Twitter Bootstrap.在这里看一下这个模板:
http://twitter.github.com/bootstrap/examples/hero.html 在其中一个标题下面,我想将长ul分成两列: * item1 * item4 它可以是代码中的两个单独的< ul>,它只需要看起来像彼此相邻的两个项目符号列. 有人可以向我推荐一种方法吗?到目前为止我的问题是保持它对屏幕大小的响应,因此在缩小屏幕时,两个单独的列表在某种程度上相互叠加. 谢谢! 解决方法
我会在span4 div标签内使用流体网格系统.在这里查看流体网格系统……
http://getbootstrap.com/css/#grid 使用此方法,当屏幕较小时,列表将再次堆叠在一起. 这是一个例子…… <html> <head> <title></title> <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> </head> <body> <div class="container"> <div class="row"> <div class="span4"> <h4>Column 1</h4> <div class="container-fluid"> <div class="row-fluid"> <div class="span6"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> <div class="span6"> <ul> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> </div> </div> </div> </div> <div class="span4"> <h4>Column 2</h4> </div> <div class="span4"> <h4>Column 3</h4> </div> </div> </div> </body> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |