Bootstrap use select作爲輸入插件

我試圖用select輸入替換input-group-addon，但它給我提供了定位問題。我可以點擊下拉菜單並選擇選項，但寬度都是錯誤的。我會在下面發佈一張圖片，看看它的樣子。Bootstrap use select作爲輸入插件

我想要的選擇是正確的旁邊的輸入，因爲用戶將能夠輸入一個大小毫米或在

我的代碼如下：

<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>

任何幫助將是偉大的，謝謝！

來源

2016-03-12 Joe Scotto

#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上的選擇左側不重？

來源

2016-03-12 06:32:20

有沒有辦法從左側刪除邊界半徑？我無法做到。 –

是的。 'border-radius：0 .4rem .4rem 0;'你只需要使用比現有選擇器更強的選擇器。正如你所看到的，它在我的代碼中起作用。提供一個完整的例子，我會給你適當的選擇。 –

在你的例子中顯示的是半徑。 –

Bootstrap use select作爲輸入插件

回答

相關問題