如何在移动设备和桌面设备之间调整文本框输入 [Bootstrap]

Question

你好，我正在使用简单的 bootstrap 文本框，就像这样<input type="text" class="form-control" id="InputFirstName" placeholder="Firstname"id="txtFN" name="txtFN"> 它在移动设备上运行良好，文本框有 100% 宽度，但它在我的桌面屏幕上也有 100% 宽度，我不希望它在桌面上是 100% 宽度。如何为桌面定制它？我必须制作 2 页文件吗？一种用于移动设备，一种用于桌面设备。谢谢

Answer 1

您应该将其包装到 .row 和 .col-* 块中，并指定您希望它们如何以不同的大小显示：

<div class="row">
  <div class="col-md-6 col-xs-12">

    <input type="text" class="form-control" id="InputFirstName" placeholder="Firstname" id="txtFN" name="txtFN">

    <!-- You can put the whole form here -->

  </div>
</div>

详细了解类要设置的内容（col-md-*、col-sm-* 等）in the docs。

Answer 2

Grid sizes :

small grid (≥ 768px) = .col-sm-*

medium grid (≥ 992px) = .col-md-*

large grid (≥ 1200px) = .col-lg-* ...

where,
md - starting at desktops and scaling to large desktops
xs - mobiles
sm - tablets
...

示例代码段：（混合 - 移动和桌面示例）

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-xs-9 col-md-7" style="background-color:red;">.col-xs-9 .col-md-7</div>
    <div class="col-xs-3 col-md-5" style="background-color:lavender;">.col-xs-3 .col-md-5</div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-md-10" style="background-color:lavenderblush;">.col-xs-6 .col-md-10</div>
    <div class="col-xs-6 col-md-2" style="background-color:lightgrey;">.col-xs-6 .col-md-2</div>
  </div>
  <div class="row" style="background-color:lightcyan;">
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-6">.col-xs-6</div>
  </div>
</div>

参考：

bootstrap grids

read

What is sm,md,lg, ..

Answer 3

默认情况下，移动设备上的输入宽度为 100%。例如，对于桌面，您可以将其设置为 50% 宽度，或者甚至像 250px 这样的像素值；

如何在移动设备和桌面设备之间调整文本框输入 [Bootstrap]

How to resize text box input between mobile and desktop [Bootstrap]

html

jquery

textbox

twitter-bootstrap