为什么我不在同一行中获得所有 4 个元素？答案

【问题标题】：Why don't I get all 4 elements in the same row?为什么我不在同一行中获得所有 4 个元素？
【发布时间】：2016-11-13 07:24:31
【问题描述】：

请看下面的代码：

<div class="container">
  <form class="form-inline" role="form">
    <div class="form-group">
      <label for="first">FIRST</label>
      <input class="form-control" id="first" ng-model="???" ng-readonly="true" />
    </div>

    <div class="form-group">
      <label for="second">SECOND</label>
      <input class="form-control" id="second" ng-model="???" ng-readonly="true" />
    </div>

    <div class="form-group">
      <label for="third">THIRD</label>
      <input class="form-control" id="third" ng-model="???" ng-readonly="true" />
    </div>

    <div class="form-group">
      <label for="fourth">FOURTH</label>
      <input class="form-control" id="fourth" ng-model="???" ng-readonly="true" />
    </div>
  </form>
</div>

我的目的是在一行中创建一个包含 4 个元素的表单。我根据这个例子写了这段代码：http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_inline&stacked=h.

但是，我将这些元素中的每一个都放在了不同的行中。你知道为什么这个代码示例没有成功吗？

【问题讨论】：

它正在工作，它显示在一行中
它工作正常并显示在一行中..检查[jsfiddle.net/e88eqL0o
我认为你的窗口不够大，所以它会自动为不同的 div 添加行
问题可能是因为您的小视口或您的某些自定义样式已覆盖它
这是一个大型代码库的一部分。我写的代码 sn-p 放在以下标签内：

... 结束标签 ...可能是周围的标签造成的？

标签： html css angularjs forms angular-ui-bootstrap

【解决方案1】：

如果您在宽度超过 768 像素的视口上测试表单，它将显示在一行中。否则不会。

在this 链接上的引导网站上使用inline-form 的演示进行测试

摘自以上链接！

为左对齐和内联块控件添加 .form-inline 到您的表单（不一定是 a ）。这仅适用于视口中至少 768 像素宽的表单。

这里是a plunker link，它表明您的代码在更大的屏幕中查看时会显示在一行中。单击 plunker 中的全屏链接并查看结果。

检查您的父容器的宽度设置是否小于 768 像素。

【讨论】：

我正在使用 1920 像素宽的屏幕观看此页面。
此表单在您的屏幕上看起来如何？ getbootstrap.com/css/#forms-inline 完全一样。尝试将其调整为小于 768px，您可以看到字段垂直
它以单行显示，一旦我减小屏幕尺寸，它就会移动垂直。
正确。这真的很疯狂，因为您拥有与该演示几乎相同的代码。让我现在尝试一下。

【解决方案2】：

试试这个：

<html ng-app="">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="col-xs-12">
      <form class="form-inline" role="form">
        <div class="form-group">
          <label for="first">FIRST</label>
          <input class="form-control" id="first" ng-model="???" ng-readonly="true" />
        </div>

        <div class="form-group">
          <label for="second">SECOND</label>
          <input class="form-control" id="second" ng-model="???" ng-readonly="true" />
        </div>

        <div class="form-group">
          <label for="third">THIRD</label>
          <input class="form-control" id="third" ng-model="???" ng-readonly="true" />
        </div>

        <div class="form-group">
          <label for="fourth">FOURTH</label>
          <input class="form-control" id="fourth" ng-model="???" ng-readonly="true" />
        </div>
      </form>
    </div>  
  </div>
</body>
</html>

这可以让您将所有四个放在一行中...

你错过了 div class="col-xs-12" 这意味着所有内容都应该排成一排，我们声明的一行最多有 12 个 col-xs。

我刚刚为你尝试过，它给了我这样的输出：

【讨论】：

我试过了。它没有帮助。它也没有在示例中显示。
只需将我的代码复制到任何 html 文件中并运行它，因为它对我有用

【解决方案3】：

也许您需要添加这些脚本和 CSS：

<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.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：

这就是答案。浏览器无法识别引导程序的类，它不会给出错误，而是忽略它。

【解决方案4】：

我认为它们对于窗口来说太大了，请尝试调整输入框的大小以在一行中适应窗口

或

尝试将所有 4 个元素放在一个 'div' 标签中，我认为在显示一个 div 标签后默认会转到下一行，所以只使用一个 div 标签

【讨论】：