Fatal编程技术网
  • html/
  • Html 为什么我不能在同一行中获得所有4个元素？

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

html css angularjs forms

Html 为什么我不能在同一行中获得所有4个元素？,html,css,angularjs,forms,angular-ui-bootstrap,Html,Css,Angularjs,Forms,Angular Ui Bootstrap,请查看以下代码： <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="tr

请查看以下代码：

<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个元素的表单。 我基于以下示例编写了此代码：

然而，我在不同的行中得到了这些元素中的每一个。您知道为什么这个代码示例不起作用吗？

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

或

尝试将所有4个元素放在一个“div”标记中，我认为在显示一个div标记后，默认情况下会转到下一行，因此只使用一个div标记

也许您需要添加以下脚本和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>
如果在宽度超过768px的视口上测试窗体，它将显示在一行中。否则就不会

通过引导网站link上的内联表单演示来测试这一点

摘自上述链接

将.form inline添加到窗体中，对于左对齐和内联块控件，该窗体不必是。这仅适用于视口中宽度至少为768px的窗体

这显示了当在更大的屏幕上查看代码时，代码显示在一行中。单击plunker中的全屏链接并查看结果

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

尝试以下操作：

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

我刚刚为你做了尝试，它给了我如下输出：

它工作了，它在一行中显示它工作正常，在一行中显示。。检查[我认为您的窗口不够大，因此它会自动为不同的分区添加行。这可能是因为您的小视口或您的某些自定义样式覆盖了它。这是大型代码存储库的一部分。我编写的代码片段放在以下标记中：…关闭标记…可能是周围的标记导致了这一点？我尝试了它。它没有帮助。它也没有显示在示例中。只需将我的代码复制到任何html文件中，然后运行它，因为它对我有效。我正在使用1920像素的宽屏幕观看此页面。此表单在您的屏幕中看起来如何？完全相同事情。尝试将其大小调整到768px以下，您可以看到字段垂直显示在一行中，一旦我减小屏幕大小，它就会垂直移动。正确。这真是太疯狂了，因为您的代码与演示几乎相同。让我现在试试。这就是答案。浏览器无法识别引导程序的类，而不是给出一个错误，它就会忽略它。