html - Bootstrap 输入组关于输入类型日期宽度的问题

Question

我一直在开发一个应用程序。在使用bootstrap的assets之后，我发现了一个我无法解决的奇怪问题。我非常了解 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; 它将解决问题。