更改 bootstrap-select 元素宽度并删除边框

Question

我已经成功地为 vanilla Bootstrap、selectize 等创建了 css 个文件。但是现在我很难尝试修改 Bootstrap-select 的默认值 css。具体来说，我正在尝试

移除元素的边框
更改元素的宽度，使其适合给定宽度的列

至于现在，由于某种原因，第二列与第一列重叠。如果删除 th.zeon-fixed-narrow-column {width: 1.5em;}，此错误就会消失。我的想法是我不想删除它，我希望第一列像 1.5em 一样窄！

这是我的 jsFiddle

table {
    table-layout: fixed;
}

th.zeon-fixed-narrow-column {
 width: 1.5em;
}

.zeon-selectpicker{
   border:none !important;
   width: 1.5em;
}

.zeon-selectpicker:focus{
    background-color:red;
}

table {
    table-layout: fixed;
}

th.zeon-fixed-narrow-column {
 width: 1.5em;
}

.zeon-selectpicker{
   border:none !important;
   width: 1.5em;
}

.zeon-selectpicker:focus{
    background-color:red;
}

Answer 1

如果我没理解错的话。您希望下拉菜单的宽度等于 table header 对吗？

要实现此目的，请将此添加到您的 css:

.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
  width:100%;
}

默认情况下，上述 bootstrap-select class 的固定宽度为 220px。你可以在这里看到结果：JSFIDDLE.

如果这不是你想要的请告诉我，我会尽力帮助你

更改 bootstrap-select 元素宽度并删除边框

Changing bootstrap-select element width and removing borders

css

twitter-bootstrap

bootstrap-select