Twitter bootstrap 我的引导行和列HTML代码有什么问题？

我有以下引导代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-10">
            <input type="text">
        </div>
        <div class="col-sm-2">
            <button type="button" class="btn btn-default">+</button>
        </div>
    </div>
</div>

+

这在桌面上工作，但当我在尺寸为240x320的小屏幕移动设备上查看时，我无法选择并在文本输入字段中输入数据。但如果我从行的最后一列中删除内容（即本例中的“+”按钮），则可以访问文本输入字段

我用股票浏览器和Opera mini在Android设备上测试了这个

我的代码怎么了？

+

col-sm-2

以下代码中的问题

<div class="col-sm-2">
    <button type="button" class="btn btn-default">+</button>
</div>

+

将

col-sm-2

替换为

col-xs-2

以修复此问题

为什么会发生这种情况？

mobilefirst框架中的Bootstrap。移动设备的样式由

列xs-*

类定义<代码>列sm-*样式将应用于屏幕

>=768px

---

因为所有Boostrap的列都使用

float:left

设置样式。在小屏幕上，

col-xs-12

将创建布局问题，并且以下元素即

col-sm-2

与所有先前元素重叠。您也可以在桌面上观察到这个问题，方法是缩小屏幕大小并使用浏览器的inspect元素进行检查。

您可以使用非堆叠列（将所有内容保持在同一行）使其正常工作

+

或..

在单个列中使用输入组

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
           <input type="text" class="form-control">
            <span class="input-group-btn">
              <button type="button" class="btn btn-default">+</button>
            </span>
        </div>
    </div>
</div>

+

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
           <input type="text" class="form-control">
            <span class="input-group-btn">
              <button type="button" class="btn btn-default">+</button>
            </span>
        </div>
    </div>
</div>