Question

您好我正在使用这样的简单引导程序文本框<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-*等）updateStyles()。

Answer 2

网格尺寸：


小格（≥768px）= .col-sm - *

中格（≥992px）= .col-md - *

大格（≥1200px）= .col-lg- * ...


其中，
md - starting at desktops and scaling to large desktops
xs - mobiles
sm - tablets
...

示例代码段:(混合 - 移动和桌面示例）

＆＃13;

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

＆＃13;

参考：

bootstrap grids

read

What is sm,md,lg, ..

Answer 3

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

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

3 个答案: