Question

有没有办法根据默认css的屏幕大小控制表单输入大小，或者这是我要创建自定义css的事情吗？我希望输入在较小的屏幕尺寸上更大，然后在较大的显示器上显示默认尺寸。

Answer 1

你已经在使用twitter bootstrap了。

我可以更多地详细说明这个问题，但Bootstrap做得最好。

所以在我开始之前，请查看：Bootstrap CSS

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

<meta name="viewport" content="width=device-width, initial-scale=1">

第二

如果你想在较小的设备上使用较大的部分：max-width css property。

您还可以使用Bootstrap制作的.img-responsive类。但基本上所有这些都写在我提供的链接中。如果你有更具体的东西，我很乐意帮忙！

祝你好运。

Answer 2

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

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

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

使用引导程序的“ row”和“ col”类，我们可以创建一行，并在其中包含列...

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

列的大小范围是1-12

因此，如果您有两列带有col-md-6，则您将连续拥有两列相等的列...

通过包括两个声明，您要告诉引导程序在特定屏幕尺寸上使用特定列尺寸，该尺寸由xs（超小），sm（小），md（中），lg（大）定义

您可以查看我发现的这篇文章，其中详细介绍了不同的选项：https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

额外：https://www.w3schools.com/bootstrap/bootstrap_grid_medium.asp

希望这会有所帮助：）

Bootstrap不同的输入大小不同的屏幕尺寸

2 个答案: