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

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

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

在this链接

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

摘自以上链接！

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

以下是a plunker link，显示您在较大屏幕中查看时的代码会显示在一行中。单击plunker中的全屏链接并查看结果。

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

Answer 3

试试这个：

<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 =＆＃34; col-xs-12＆＃34;这意味着所有内容都应该在一排，一行最多有12个我们声明的col-xs。

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

Answer 4

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

或

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

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

4 个答案: