Question

我有这个HTML：

<html>
<head>
    <link href="bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
        <form method="post" enctype="multipart/form-data">
        <table class="table">
            <tr>
                <td>Current Version</td>
                <td><strong><?= $version ?></strong></td>
            </tr>
            <tr>
                <td>Upload new version</td>
                <td><input class="btn-info btn" type="file" name="package"><input type="submit" class="btn-info btn" value="Upload"></td>
            </tr>
        </table>
        </form>
    </div>    
</body>
</html>

但submit按钮是在fileupload元素下呈现的，但我希望它位于右侧。当我禁用bootstrap时，它可以工作。如何获取文件浏览器旁边的任何信息？

Answer 1

Bootstrap使文件上传按钮成为一个块，使整个空间和按钮不会相互对齐。

您可以全局设置输入类型文件，使其显示为inline-block，以便它们彼此相邻。

input[type=file] {
  display: inline-block;
}

或者你当然可以给特定的文件上传按钮一个类，并仅为它声明css。

小提琴：https://jsfiddle.net/pozh7cj3/2/

Answer 2

Boostrap可以帮助摆脱table designed页。

所以，你可以像这样编写你的表格：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <form class="form-horizontal" method="post" enctype="multipart/form-data">
    <div class="form-group">
      <label class="col-xs-4 control-label">Current Version</label>
      <div class="col-xs-8">
        <p class="form-control-static"><strong><?= $version ?></strong></p>
      </div>
    </div>
    <div class="form-group">
      <label for="package" class="col-xs-4 control-label">Upload new version</label>
      <div class="col-xs-6">
        <input class="form-control" type="file" name="package">
      </div>
      <div class="col-xs-2">
        <input type="submit" class="btn-info btn" value="Upload">
      </div>
    </div>
  </form>
</div>

（col-xs*类用于通过代码片段的小视口获得所需的结果。

在<input type =“file”/>元素旁边放置一个元素

2 个答案: