如何設置自舉輸入響應寬度？

我需要在兩個字段中都使用日曆來進行內聯表單。由於某種原因，我無法擺脫的文本和輸入的邊界之間的額外空間的......這裏的問題是如何設置自舉輸入響應寬度？

我試圖設置寬度爲的圖片父母的div和輸入本身....但不好..

這是我迄今爲止所做的。 Fiddle：

 <div class="modify_search"> 
     <div class="search_wrapper"> 
      <div class="search_header"> 
      <form class="form-inline"> 
       <div class="left"> 
       <span>DU</span> 
       <div class="input-group"> 
        <input type="text" class="form-control search_input" id="inlineFormInputGroup"> 
        <div class="input-group-addon"> 
        <i class="fa fa-calendar" aria-hidden="true"></i> 
        </div> 
       </div> 
       </div> 
       <div class="right"> 
       <span>DU</span> 
       <div class="input-group"> 
        <input type="text" class="form-control search_input" id="inlineFormInputGroup"> 
        <div class="input-group-addon"> 
        <i class="fa fa-calendar" aria-hidden="true"></i> 
        </div> 
       </div> 
       </div> 
      </form> 
      </div> 
     </div> 
     </div>

這裏是CSS：

 .search_input { 
     border: none; 
     outline: none; 
     font-size: 24px; 
     box-shadow: none; 
     } 

     .search_input:focus { 
     box-shadow: none; 
     } 

     .modify_search { 
     overflow: hidden; 
     position: absolute; 
     background-color: white; 
     width: 60vw; 
     height: 37vh; 
     left: 50%; 
     bottom: 5%; 
     transform: translate(-50%, 0%); 
     border-radius: 10px; 
     -webkit-box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75); 
     -moz-box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75); 
     box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75); 
     } 

     .left, 
     .right { 
     margin-right: 15px; 
     border-bottom: 1px solid grey; 
     } 

     .left { 
     float: left; 
     } 

     .right { 
     float: right; 
     } 

     .search_header { 
     padding: 15px 15px 0px 15px; 
     } 

     .input-group-addon { 
     background-color: white; 
     border: none; 
     }

來源

2017-07-27 RoyBarOn

當你使用引導你到witdh適用於input-group如果您有其他input-group與diferent寬度，只需添加一個id來父DIV和過濾器CSS類與ID

#less-width .input-group{ 
    width: 180px !important; 
}

http://jsfiddle.net/duj0s5ev/8/

或者你可以把它添加到充滿希望的寬度

http://jsfiddle.net/duj0s5ev/11/

來源

2017-07-27 11:40:13 Arngue

謝謝....我不知道關於這個解決方案的自舉列...它搞亂了的div ... – RoyBarOn

@RoyBarOn 抱歉老兄，在這裏我更好地表明我的第二個解決方案，你可以看到輸入日曆如何從引導列中獲取寬度jsfiddle.net/duj0s5ev/13 – Arngue

Arngue - 謝謝 - 但不幸的是沒有任何改變 - 我的目標是去除文本左側的額外空間並保持輸入內嵌..... – RoyBarOn

如何設置自舉輸入響應寬度？

回答

相關問題