Bootstrap按钮：拉伸以填充其容器空间

Question

我正在使用Bootstrap按钮，我想将下拉按钮在中间拉伸以填充剩余的工具栏空间。

HTML（缩短的代码）:

<div class="gallery-toolbar">
    <ul style="padding:0">
   <li><a>Back</a></li>

   <li id="gallery_title">
   <div class="btn-group">
     <a class="btn btn-default"><?php echo $gallery->title ?></a>
     <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
     <ul class="dropdown-menu">some php</ul>
   </div></li>

  <li><a>Slideshow</a></li>

层叠样式表：

.gallery-toolbar li { list-style:none; display: inline }
.gallery-toolbar li:last-child { float:right }
#gallery-title { ?? }

我尝试过使用 "btn-group-jastified" 这个类，但它完全没有起作用。

有什么想法吗？

- Murhaf Sousli

Answer 1

你尝试过使用 btn-block 吗？

<a class="btn btn-default btn-block"></a>

尝试在其中应用 width:100%

<div class="btn-group" style="width:100%">

- Milad

---

btn-block 类在 BS 5.1 中已被删除。https://dev59.com/wWct5IYBdhLWcg3wetUo#68974259 - carloswm85

Answer 2

对于Bootstrap 5，这样做是行不通的。需要添加w-100类。

<a class="btn btn-default btn-block w-100"></a>

- vimuth