Question

我目前正在尝试为我的网站创建一个可编辑的下拉列表，经过一些谷歌搜索后，似乎最简单的方法是将文本框放在下拉列表的顶部，并在选中时将文本传递到文本框，这样可以正常工作但是当它将这个原则应用于twitter-bootstrap时，我无法弄清楚如何对齐css部分（下拉宽度总是超出col-boundary），请问是否有人能给我提供一些灯？

HTML

<div class="row">
 <div class="col-lg-6 col-sm-6">
  <div class="form-group">
    <div class="input-group input-group">
      <span class="input-group-addon">Name</span>
      <select id="cboName" name="cboName" class="form-control editDropDown-select"  onchange="this.nextElementSibling.value=this.value">
            <option value="John">John</option>
            <option value="Peter">Peter</option>
            <option value="Mary">Mary</option>                                         
        </select>
      <input type="text" id="name" class="form-control"/>
    </div>
  </div>
 </div>
 <div class="col-lg-4 col-sm-4">
  <div class="form-group">
    <div class="input-group input-group">
      <span class="input-group-addon">Other</span>
      <input type="text" id="other" class="form-control"/>
    </div>
  </div>
 </div>
 <div class="col-lg-2 col-sm-2">
    <button type="submit" class="btn btn-default">Submit</button>
 </div>
</div>

CSS

.editDropDown-select
{
    position: absolute;
    top: 0px;   
    width:100px; 
}

的jsfiddle http://jsfiddle.net/gfruxn7q/

引导程序中的可编辑下拉列表 - 下拉列表超出了col-x范围

0 个答案: