Question

我需要显示一个模态，允许用户输入名称和一些细节。我只想要每行显示2个输入。

下面是显示4行输入字段的代码，我只需要显示2行。如何实现。

static long my_ioctl(struct file *f, unsigned int cmd, unsigned long arg)

Answer 1

通过将form-group类添加到.row中，将form-group定义为行，并将col-sm-3中的每一个合并到一个form-group下，如下所示：

<form class="form-horizontal" method="get">
   <div class="form-group row">
      <label class="col-sm-2 control-label">User Name</label>
      <div class="col-sm-3">
         <input class="form-control"  type="text" readonly>
      </div>
      <label for="inputPassword" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-3">
         <input class="form-control" type="text">
       </div>
    </div>

    <div class="form-group row">
       <label for="inputPassword" class="col-sm-2 control-label">Address1</label>
       <div class="col-sm-3">
          <input class="form-control" type="text">
       </div>
       <label for="inputPassword" class="col-sm-2 control-label">Address2</label>
       <div class="col-sm-3">
          <input class="form-control"  type="text">
        </div>
     </div>
</form>

Answer 2

如果在

中包装两个表单控件

<div class="row">
    <div class="col-sm-6">
        Form control 1
    </div>
    <div class="col-sm-6">
        Form control 2
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-6">
        Form control 3
    </div>
    <div class="col-sm-6">
        Form control 4
    </div>
    <div class="clearfix"></div>
</div>

这应该将表单控件分开，因此一行只显示2。明确的解决方案是css样式，通常设置为

.clearfix {
    clear:both
}

Answer 3

将有害生物代码复制到单个文件中并检查您的本地文件是否会运行。完善。以下是现代的做法。您可以参考this link获取有关动态创建模态的方式的更多详细信息。

function showForm() {
  var msg = $('#form-container');
  BootstrapDialog.show({
    title: 'Default Title',
    message: $('#form-container'),
    buttons: [{
      label: 'Submit',
      action: function(dialog) {
        // What to do on submit goes here.
      }
    }, {
      label: 'Close',
      action: function(dialog) {
        dialog.close();
      }
    }],
    onhide: function(dialog) {
      $('#hidden-div').append(msg);
    }
  });
}

.modal-dialog {
  //width : 800px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>

<button onclick="showForm()">Show Form</button>

<div style="display : none" id="hidden-div">

  <div class="container-fluid" id="form-container">
    <form class="form-horizontal" method="get">
      <div class="form-group">
        <label class="col-sm-2 control-label">User Name</label>
        <div class="col-sm-3">
          <input class="form-control" type="text" readonly>
        </div>
        <label for="inputPassword" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-3">
          <input class="form-control" type="text">
        </div>
      </div>

      <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">Address1</label>
        <div class="col-sm-3">
          <input class="form-control" type="text">
        </div>
        <label for="inputPassword" class="col-sm-2 control-label">Address2</label>
        <div class="col-sm-3">
          <input class="form-control" type="text">
        </div>
      </div>
    </form>
  </div>

</div>

Boostrap表单输入排列在列中

3 个答案: