Question

我正在尝试使用Bootstrap设置响应式输入网页，我遇到了两个主要困难 1.将标签放在与输入框相同的行上 2.当屏幕“不动产”时，让输入框自动调整大小。收缩

代表性代码是

<html>
<head>
   <title>Try v1.2 Bootstrap Online</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<form class = "form" role = "form">
   <div class = "row form-group">
      <div class="inline-block col-md-6 " style="float: left;" >
         <label class = "control-label float: left;">First Name</label>
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>

      <div class="inline-block col-md-6 " style="float: left;" >
         <label class = "control-label float: left;">Last Name</label>
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </div>
   </div>

   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <button type = "submit" class = "btn btn-default">Sign in</button>
      </div>
   </div>

</form>

</body>
</html>

这给我一个表格如下：

正如您所看到的，单个标签位于相关的输入框上方，我希望它们在线当我调整浏览器窗口的大小时，输入框不会改变大小。

我需要改变什么才能让事情变得像我需要的那样？

我提前感谢您提供的任何建议/建议。

编辑 - 通过继续搜索网络，我终于找到了解决我的问题的例子。令人惊讶的是，有多个解决方案有些人表示要使用 class =＆＃34; form-horizontal＆＃34; 表单和其他方法表示使用 class =＆＃34; form-inline＆＃34; 表单。
这两种方法似乎都会产生像我需要的可行的响应式表格无论我会尝试修改它们，看看它带我去哪里。

Answer 1

请详细了解here，以便更好地了解水平表格。

  <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
    </div>

Bootstrap输入文本调整大小

1 个答案: