twitter-bootstrap – 如何使用Bootstrap在英雄单元中显示两列?
发布时间:2020-12-17 20:41:11 所属栏目:安全 来源:网络整理
导读:我试图让bootstrap的行在英雄单位内部工作.我厌倦了这个例子 How to display a thumbnail in the hero unit with Bootstrap?,但它似乎不起作用.我只在英雄中获得1列.我的猜测是填充导致列换行,因为当将填充设置为0时它似乎正确对齐,但我不确定如何正确地解决
我试图让bootstrap的行在英雄单位内部工作.我厌倦了这个例子
How to display a thumbnail in the hero unit with Bootstrap?,但它似乎不起作用.我只在英雄中获得1列.我的猜测是填充导致列换行,因为当将填充设置为0时它似乎正确对齐,但我不确定如何正确地解决这个问题.
<div class="hero-unit" style="padding: 15px;"> <div class="page-header"> <h2> Example Page Header <small>Example Sub Header</small> </h2> </div> <div class="row"> <div class="span4"> <img src="http://placehold.it/360x268" alt=""> </div> <div class="span8"> test </div> </div> </div> 解决方法
亚历克斯,
如果您正在使用bootstrap-responsive.css或流体模板,则应用以下标记. <div class="hero-unit"> <div class="row-fluid"> <div class="columnA pull-left"> <h2>Column A</h2> <img src="http://placehold.it/500x300.png"/> </div> <div class="columnB pull-right"> <h2>Column B</h2> <img src="http://placehold.it/500x300.png"/> </div> </div> </div> 然后在头部插入以下样式. .columnA,.columnB{ width: 500px; } 上述代码应输出类似于下图的文件: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |