为select和option设置相同的宽度

Question

我正在尝试为选项内容设置宽度。但它采用具有最大长度的选项值的宽度。我对选项值长度没有任何控制权。如果其更多选项内容超出其父级 div class =“col-md-6”

如何限制选项的宽度。所以它不会超出它的父div。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <div class="container">

        <div class="row">
            <div class="col-md-4">

                <label class="control-label">Select Accomplishment</label>

                <select class="form-control form-select">
  <option value="" selected="selected">New Accomplishment</option>
  <option value="0">New AccomplishmentNew AccomplishmentNew AccomplishmentNew AccomplishmentNew AccomplishmentNew AccomplishmentNew AccomplishmentNew AccomplishmentNew AccomplishmentNew Accomplishment</option>
</select>

            </div>

        </div>

    </div>

Answer 1

select {
    width:100%;
}

如果你的班级有填充，你可能需要将它减少到95左右。

这适用于将select css应用于下拉选项。只要确保你的其他类都不与此相矛盾。