更改选择宽度以适合 div 容器

Question

我已将 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 的宽度应该更新以适应新的窗口宽度。

如何使用引导 CSS 实现这一目标？

Answer 1

试试width:100%;

ListView 中的每个元素都适用于我

Answer 2

我从这个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>