Twitter bootstrap 3 引导不同的输入大小不同的屏幕大小

有没有一种方法可以根据默认css的屏幕大小来控制表单输入大小，或者这是我必须创建自定义css才能做到的？我希望在较小的屏幕上输入较大的内容，然后在较大的显示器上显示默认大小。

您已经在使用twitter引导了

我可以详细阐述这个问题，但Bootstrap做得最好

因此，在我开始之前，请查看：

为确保正确渲染和触摸缩放，请将视口元标记添加到

第二：

如果您想在较小的设备上使用较大的部分，请使用：

max width

css属性

您还可以使用Bootstrap创建的

.img responsive

类。但基本上所有这些都写在我提供的链接中。如果你有更具体的事情，我很乐意帮忙

---

祝你好运。

所以这可能不是正确的答案，但上面的答案并没有解释太多关于实际代码的内容

所以，这里是我所拥有的：

<div class="row">
    <div class="col-xs-3 col-sm-8" style="vertical-align: middle;align-self: center;">

        <input type="text" name="search" placeholder="Search lots..." style="padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc;
            border-radius: 4px; box-sizing: border-box; width:100%;" bind="@searchValue" />

    </div>

    <div class="col-xs-1 col-md-2" style="vertical-align: middle;align-self: center;">
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
                onclick="@searchColumn(searchValue)">
            SEARCH
        </button>
    </div>

    <div class="col-xs-1 col-md-2" style="vertical-align: middle;align-self: center;">
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
                onclick=@(async () => await Reload()) id="btnReset">
            RESET
        </button>

    </div>
</div>

搜寻
等待重新加载（））id=“btnReset”>
重置

使用引导“row”和“col”类，我们可以生成一行，其中包含列

class=“col-sm-8”表示在小型设备上的列，列大小为8

列大小从1到12不等

所以如果有两列col-md-6，那么一行中会有两个相等的列

通过包含两个声明，您告诉bootstrap在特定的屏幕大小上使用特定的列大小，由xs（超小）、sm（小）、md（中）、lg（大）定义

您可以看看我找到的这篇文章，它详细解释了不同的选项：

额外：

希望这有帮助：）