Css bootstrap 3中输入的大小较窄

我想缩小水平形式中输入框的大小

我使用了

col-sm-4

来缩小文本框

 <form class="form-horizontal">
      <div class=" form-group">
          <label class="col-sm-2 control-label">date</label>
          <div class="col-sm-4">
               <input name="date" type="text" class="form-control" />
           </div>
       </div>    
</form>

日期

对于大尺寸，它可以工作，但是当我调整窗体大小并使其变小时，突然，输入框的长度会拉伸并变大。因此，对于大屏幕，输入将有230px，对于小屏幕，输入将有608px

小提琴手

---

我希望文本框的大小在页面收缩期间保持不变。

您只需要添加移动（xs）类，如下所示：

 <div class="col-sm-4 col-xs-4">
        <input name="fromDate" type="text" class="form-control" />
 </div>

或者只留下col-xs-4，在这种情况下不需要sm

编辑：

回复：你的评论，你可以使用稍微不同的html，比如soQ

<div class=" form-group">
    <div class="col-xs-2">
        <label class="control-label" for="fromDate">date</label>
    </div>
    <div class="col-xs-4">
        <input name="fromDate" type="text" class="form-control" />
    </div>
</div>

日期

这应该可以做到：

<form class="form-horizontal">
    <div class=" form-group">
        <label class="col-sm-2 col-xs-12 control-label">date</label>
        <div class="col-sm-4 col-xs-4">
            <input name="date" type="text" class="form-control" />
        </div>
    </div>    
</form>

日期

我已经测试过了，当您最小化表单时，标签和文本框的位置将切换！您将首先看到一个文本框，然后是标签。您要求该框保持相同大小。甚至没有提到标签的位置。查看编辑，谢谢！请看，当您调整此表单的大小并使其收缩时，标签将移动到表单顶部（在新行中）检查我的编辑和小提琴链接，正如我前面所说，此问题已解决。请看，当您调整此表单的大小并使其收缩时，标签将移动到表单顶部（在新行中）我向您展示的示例工作得非常好：选中此链接，因为它将保持输入框大小不变。但它也会阻止标签移动到新行中。你们能不能请这个，调整大小，你们会看到标签将移动到新行。你们检查了我的JSFIDLE示例了吗？你所要做的就是用col-xs-4替换col-sm-4，它不会越界，你到底不明白什么？亲爱的paula，我当然检查了你的链接。在bootstrap中，水平形式的响应方式是将标签移动到新行。您的解决方案将标签和输入保持在同一行中。