为什么我不能将所有 4 个元素都放在同一行中？

Question

请看下面的代码：

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

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

Answer 1

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

或

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

Answer 2

也许您需要添加这些脚本和 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>

Answer 3

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

在 this link

的 bootstraps 网站上使用 inline-form 的演示进行测试

以上内容摘录link!

Add .form-inline to your form (which doesn't have to be a ) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

这里 a plunker link 显示在大屏幕上查看时您的代码显示在一行中。在plunker中点击全屏link，查看结果。

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

Answer 4

试试这个：

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

这使您在一行中看到所有四个...

you have missed div class="col-xs-12" that means all content should be in one row, one row have maximum 12 col-xs that we declared.

我刚刚为你试过了，它给我的输出如下：

为什么我不能将所有 4 个元素都放在同一行中？

Why don't I get all 4 elements in the same row?

html

css

forms

angularjs

angular-ui-bootstrap