如何设置自举输入响应宽度？

我需要在两个字段中都使用日历来进行内联表单。由于某种原因，我无法摆脱的文本和输入的边界之间的额外空间的......这里的问题是如何设置自举输入响应宽度？

我试图设置宽度为的图片父母的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

如何设置自举输入响应宽度？

回答

相关问题