如何使 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

为您的按钮添加一个宽度 class，如下所示，这将阻止它根据所选值更改。

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

https://jsfiddle.net/0yur1s42/

Answer 2

您可以为 ul.dropdown-menu

编辑 CSS

设置固定宽度的尺寸是：

max-width
min-width

修复

的宽度

<span>1</span> <!--This is the label that I want to fix -->

改为

<span style='width=100px'>1</span> <!--This is the label that I want to fix -->

将 100px 更改为您需要的任何宽度

对于按钮：

 <div class="btn-group">

在样式表中更改 CSS 或将该行更改为：

 <div class="btn-group" style='width=100px'>

希望对您有所帮助

Answer 3

您可以添加以下 CSS 属性来解决该问题：

.btn-group button{
    width:130px !important;
}

Answer 4

朋友我修改了.btn的cssclass这就是代码笔

.btn{
   min-width: 131px;
    max-width: 131px;
    overflow: hidden;
    text-overflow: ellipsis;
    
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
      .number{
        font-size: 3vw;
        vertical-align: middle;
        margin: 3px;
      }
    </style>
  </head>
  <body>
    <div class="container text-center">
      
      <!-- template for one dropdown -->
      <template id="template">
        <div class="entry">
          <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 very long text</a>
            </div>
          </div>
        </div>
      </template>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>
      //generates 5 dropdowns concisely (instead of copying and pasting HTML code)
      var template = document.getElementById("template")
      for(var i = 1; i<=5; i++){
        //creates span with number
        var span = document.createElement("span");
        var num = document.createTextNode(i);
        span.setAttribute("class", "number");
        span.appendChild(num);
        
        //adds span to the template
        var clon = template.content.cloneNode(true);
        clon.childNodes[1].prepend(span); 
        document.getElementsByClassName("container")[0].appendChild(clon);
      }
 
      $(document).ready(function(){
        //replaces text in the dropdown with current selection
        $(".dropdown-item").on("click", function(){
          $(this).parent().prev().text($(this).text());
        });
              });
    </script>
  </body>
</html>

https://codepen.io/Qleoz12/pen/NempvQ?editors=1100

请记住，在某些情况下，长文本可能会溢出

如何使 bootstrap 下拉菜单不随不同文本改变宽度或不影响其他元素？

How to make bootstrap dropdown not change width with different text or not impact other elements?

html

css

width

drop-down-menu

bootstrap-4