Question

我有两个按钮。一个文本很长，另一个文本长度很短。

BS的默认设置是根据文本的长度改变按钮的长度。我的问题是：无论文本长度如何，我怎样才能使它们具有相同的长度。

谢谢！

Answer 1

我建议您测试以下代码。这里按钮组将扩展到父元素的宽度。如果工作请删除内联样式。

<div class="btn-group calendar-list-item" style="width:100%">
  <button type="button" class="btn btn-success" style="width:88%">I am a very long button for all the world to see</button>
  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a>
    </li>
    <li><a href="#">Another action</a>
    </li>
    <li><a href="#">Something else here</a>
    </li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a>
    </li>
  </ul>
</div>

<br>
<br>
<div class="btn-group calendar-list-item " style="width:100%">
  <button type="button" class="btn btn-primary" style="width:88%">I wish I was that long</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a>
    </li>
    <li><a href="#">Another action</a>
    </li>
    <li><a href="#">Something else here</a>
    </li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a>
    </li>
  </ul>
</div>

您可以使用＆＃39; .btn-block＆＃39;按钮上的课程。这会将按钮展开到父元素的宽度。 Read more

Bootstrap 3.0 - 如何使2个按钮的宽度相同？

1 个答案: