当我使用btn组的时,我在让引导工具栏从左到右100%填充时遇到了一些问题
我尝试过使用:btn group justified
没有btn组正当的示例
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Left 1</button>
<button type="button" class="btn btn-default">Left 2</button>
<button type="button" class="btn btn-default">Left 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle 1</button>
<button type="button" class="btn btn-default">Middle 2</button>
<button type="button" class="btn btn-default">Middle 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right 1</button>
<button type="button" class="btn btn-default">Right 2</button>
<button type="button" class="btn btn-default">Right 3</button>
</div>
</div>
btn组正当示例
<div class="btn-toolbar btn-group-justified" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Left 1</button>
<button type="button" class="btn btn-default">Left 2</button>
<button type="button" class="btn btn-default">Left 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle 1</button>
<button type="button" class="btn btn-default">Middle 2</button>
<button type="button" class="btn btn-default">Middle 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right 1</button>
<button type="button" class="btn btn-default">Right 2</button>
<button type="button" class="btn btn-default">Right 3</button>
</div>
</div>
此外,函数width="100%"也不起作用。有什么建议吗?还是其他选择?
谢谢你。
使用btn块类和col-xx-yy类:
<div class="btn-group btn-block">
<button class="btn btn-default col-lg-4" type="button">Left 1</button>
<button class="btn btn-default col-lg-4" type="button">Left 2</button>
<button class="btn btn-default col-lg-4" type="button">Left 3</button>
</div>
我认为解决方案是在层次结构中添加一个额外的btn组div,并在此基础上使用btn组,即
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-default" type="button">Left 1</button>
<button class="btn btn-default" type="button">Left 2</button>
<button class="btn btn-default" type="button">Left 3</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">Middle 1</button>
<button class="btn btn-default" type="button">Middle 2</button>
<button class="btn btn-default" type="button">Middle 3</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">Right 1</button>
<button class="btn btn-default" type="button">Right 2</button>
<button class="btn btn-default" type="button">Right 3</button>
</div>
</div>
</div>