Question

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

我使用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

fiddel http://jsfiddle.net/3YWkd/

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

Answer 1

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

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

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

编辑：

Re：你的评论，你可能会使用稍微不同的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>

fiddle

Answer 2

这应该这样做：

<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>

引导程序3中输入的大小

2 个答案: