css - 如何使 bootstrap 下拉列表不随不同文本改变宽度或不影响其他元素？

Question

我有一个带有不同选项的 Bootstrap 下拉菜单。当选择不同的选项时，它的宽度会改变(由于不同的文本长度)。这会导致它旁边的元素移动。如何防止它们移动？

目前，代码如下所示:

<div class="entry">
    <span>1</span> <!--This is the label that I want to fix -->
     <div class="btn-group">
         <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Not Selected</button>
          <div class="dropdown-menu">
              <a class="dropdown-item">Not Selected</a>
              <a class="dropdown-item">short</a>
              <a class="dropdown-item">This is long text</a>
            </div>
       </div>
   </div>

这是我的 jsbin with all the code .

只要按钮的大小发生变化，数字标签 (1-5) 就会四处移动，使一切看起来杂乱无章且没有吸引力。我如何防止它移动或为保证适合所有文本的下拉菜单设置固定宽度？

Answer 1

向您的按钮类添加一个宽度，如下所示，这将阻止它根据所选值而改变。

.btn-success {
    width:250px;
    max-width:100%;
}

https://jsfiddle.net/0yur1s42/