Bootstrap使用select作为输入附加组件

Question

我正在尝试input-group-addon用select输入替换它,但它给了我定位问题.我可以单击下拉列表并选择选项,但宽度都是错误的.我会在下面张贴一张图片.

我希望select位于输入旁边,因为用户可以输入mm或in中的大小.

我的代码如下:

<div class="form-group">
    <label for="wrapped">Wrapped Around</label>
    <div class="input-group">
        <input type="number" class="form-control" id="wrapped" placeholder="Wrapped Around" name="wrapped" step="0.01">
        <div class="input-group-addon">
            <select class="form-control">
                <option selected>Pick</option>
                <option>mm</option>
                <option>in</option>
            </select>
        </div>
    </div>
</div>

任何帮助都会很棒,谢谢!

Answer 1

#wrapped+.input-group-addon {
    margin: 0;
    padding: 0;
    min-width: 8rem;
    border: none;
}
#wrapped+.input-group-addon>.form-control {
    border-radius: 0 .4rem .4rem 0;
    border-left: none;
}

/* CSS below is for centering the div in the page, you only need what is above this line */

body {
    min-height: 100vh;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}
body > .form-group {
    width: 50vw;
}

<link rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
      crossorigin="anonymous"
      />
<div class="form-group">
  <label for="wrapped">Wrapped Around</label>
  <div class="input-group">
    <input id="wrapped" 
           class="form-control" 
           type="number" 
           placeholder="Wrapped Around" 
           name="wrapped" 
           step="0.01"
           />
    <div class="input-group-addon">
      <select class="form-control">
        <option selected>Pick</option>
        <option>mm</option>
        <option>in</option>
      </select>
    </div>
  </div>
</div>

屏幕截图,根据评论:

有没有人遇到乔在评论中提到的问题:border-radius没有在选择的左侧重置？