Bootstrap输入组在输入类型日期的宽度上发布

Question

我一直在开发一个应用程序。在使用bootstrap的资产后，我发现了一个我无法解决的奇怪问题。我非常了解CSS，但这非常棘手。我无法解决它作为前端开发人员的问题。

我只是在bootstrap输入组中添加了输入类型日期。但是在使它变得越来越小之后，它会溢出div。我已经尝试了一切来解决它我都没有成功。我希望它像简单的输入组一样工作。

为了说明，我在背景中添加了红色。显示日期和文本输入之间的差异。

以下是代码：

.color { background: red; padding-top:20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
   <div class="row">
      <div class="col-xs-4 col-xs-offset-4">
         <div class="color">
            <div class="form-group"> 
            <div class="input-group"> 
               <span class="input-group-addon">Date</span>
               <input class="form-control " placeholder="From" type="date">
            </div>
            </div>
            
            <div class="form-group"> 
            <div class="input-group"> 
               <span class="input-group-addon">Text</span>
               <input class="form-control " placeholder="From" type="text">
            </div>
            </div>
            
         </div>
      </div>
   </div>
</div>

我想念一下吗？

由于

Answer 1

添加min-width: 100%;和width: 50px;它将解决问题。