引导 3 选择器，用于从 md 更改为 sm 响应

Question

如何更改（或要添加到类中的内容）以下代码，以便当浏览器更改为小尺寸时，标签名称 2 直接位于标签名称 1 下方，输入 txtName2 直接位于输入 txtName1 下方？ 这是代码：

<form id="form1" class="form-horizontal" runat="server">  
 <div class="form-group">
       <label for="txtName" class="col-md-2 control-label">Name 1:</label>
        <div class="col-md-4">
            <input type="text" id="txtName" name="txtName" style="width:300px" />
        </div>
       <label for="txtName2" class="col-md-2 control-label">Name 2:</label>
        <div class="col-md-4">
            <input type="text" id="txtName2" name="txtName2" style="width:300px" />
        </div>
   </div>

所以我的小型设备"外观"应该是这样的：

名称 1

：txt名称 1

名称 2

：txt名称 2

Answer 1

您可以重写任何 html 代码并添加特殊类

hidden-sm
hidden-md
hidden-lg

例如

<div class="hidden-sm">this will be hidden only on sm width size, in others will be showen</div>

可以根据需要添加此类。使用此类，您可以完全更改页面的布局。

还要记住基本规则，最好在类中为每个"lg \ md \ sm \ xs"定义所有类型，顺便在官方手册上描述。

Answer 2

只需将您的col-md-*替换为col-xs-*即可。自动地，当您达到xs大小时，输入宽度将100%，您可以通过指定col-xs-*来防止这种情况。您应该删除内联宽度。

编辑：您有一个包含所有标签和输入内容的form-group。每个标签输入对应该有一个。你错过了.form-control：引导水平形式

这里有一个演示：http://jsfiddle.net/67vuk/1/

编辑2：我不知道这是否是最好的方法，但您可以在第二个标签之前添加一个<div class="clearfix visible-xs"></div>：http://jsfiddle.net/52VtD/4188/

编辑3：第二种方法：http://jsfiddle.net/67vuk/2/