Bootstrap - 按钮工具栏宽度100％ - 使用btn-group的 [英] Bootstrap - Button toolbar width 100% - using btn-group's

问题描述

当我使用 btn-group 的

时，获取引导工具栏从左到右填充100％我尝试过使用： btn-group-justified

I have tried use: btn-group-justified

没有btn-group-justified的示例

<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-group-justified示例

<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％不起作用。有什么建议么？或替代品？

And also the function: width="100%" does not work. any suggestions? or alternatives?

Thanky you。

Thanky you.

推荐答案

使用btn-block class and col-xx-yy class：

Use btn-block class and col-xx-yy class:

<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>

这篇关于Bootstrap - 按钮工具栏宽度100％ - 使用btn-group的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！