我已经定义了一个dropdwon作为研究员:
<div class="form-group">
<select class="form-control">
<option>small option</option>
<option>mediummmmmmmmmmmmmmmmmmmm option</option>
<option>large eeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeee eeeeeeeeeeeee eeee option</option>
</select>
</div>
我想将select
宽度更改为容器宽度和option
文本宽度的最小值。如果option
文本大于div
容器,请截断选项的文本并将省略号放在最后。所以option
保留在容器内。此外select
必须具有响应性,在调整窗口大小时,应更新select
宽度以适应新的窗口宽度。
如何使用bootstrap CSS实现这一目标?
答案 0 :(得分:0)
我从这个stackoverflow answer中得到了这个答案
.dropdown{
width:150px;
border: 1px solid #cfcfcf;
height: auto;
border-radius: 5px;
padding:3px 4px 4px;
position: relative;
z-index: 0;
overflow:hidden;
}
.dropdown select{
border: none;
background-color: transparent;
outline: none;
padding: 0;
width:150px;
/* background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right; */
/* background-position: 55%; */
}
/* not 100% sure this next option rule is needed */
.dropdown option {
width:150px
}
/* this places an arbitrary element inside the dropdown but before it's children elements */
/* We use it to cover half the select box as well as display the custom arrow */
<div class="dropdown">
<select>
<option value="">Some Text</option>
<option value="">Some More Text2</option>
<option value="">Some More More More Longer Text</option>
</select>
</div>
答案 1 :(得分:0)
尝试width:100%;
它适用于ListView中的每个元素