时间戳

首页 > 解决方案 > 下拉菜单宽度太大

bootstrap-4 - 下拉菜单宽度太大

问题描述

我正在使用 Bootstrap 4 和 Bootstrap 4 Select Picker 来定义我的下拉菜单。但是，下拉菜单的宽度会自动设置为最大文本的宽度。有没有办法手动设置这个宽度？这是我到目前为止所拥有的：

<span> <select class="selectpicker" style="width: 150px;
overflow: hidden;
text-overflow: ellipsis;position: absolute;"
multiple data-live-search="true" 
data-actions-box="true" data-selected-text-format="count" 
data-size="15">

<?php


  $db = $_POST["dbsel"]=="" ? "pdbbind" : $_REQUEST["dbsel"];

  $metSel = "";
  $ddList = "";

  if(strcmp($db,"pdbbind")==0){
    $sql .= "SELECT DISTINCT PDBcode FROM pdbbind";
  }elseif(strcmp($db,"pdb")==0){
    $sql = "SELECT DISTINCT metaboliteName FROM PDB";
  }elseif (strcmp($db,"brenda")==0) {
    $sql = "SELECT DISTINCT metaboliteName FROM BRENDA";
  }elseif (strcmp($db,"HMDB")==0) {
    $sql = "SELECT DISTINCT metaboliteName FROM HMDB";
  }


  $result = $conn->query($sql);
  while($row = mysqli_fetch_array($result)) {
    print "<option>".$row[0]."</option>";
  }

?>
</select>&nbsp;&nbsp;</span>

标签： bootstrap-4bootstrap-selectpicker

解决方案

我可以通过设置内部元素样式的最大宽度来解决这个问题：

.inner {
  max-width: 300px;
  overflow-x: hidden;
}

推荐阅读