Question

我一直在关注教程，但填充/边距无效，文件上传图标也没有显示。你能看看并提出解决方案吗？

我从这里获取了文件上传脚本和示例：http://markusslima.github.io/bootstrap-filestyle/

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
  <script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>

</head>

<body>

<div class="container">
        <form action="upload.php" method="post" enctype="multipart/form-data">
                <div class="container-fluid m-t-10">
                        <div class="row-fluid m-t-10">
                                <div class="col-md-4 m-b-5">
                                        m: <input type="text" name="m"><br>
                                </div>
                                <div class="col-md-4 m-b-5">
                                        sigma: <input type="text" name="sigma"><br>
                                </div>
                                <div class="col-md-4 p-a-5">
                                        gamma: <input type="text" name="gamma"><br>
                                </div>
                        </div>
                </div>
                <div class="container-fluid m-t-20">
                        <div class="row-fluid">
                                <div class="col-md-4 p-a-5">
                                        threshold: <input type="text" name="thres"><br>
                                </div>
                                <div class="col-md-4 p-a-5">
                                        nei: <input type="text" name="nei"><br>
                                </div>
                        </div>
                </div>
                <div class="container-fluid m-t-30">
                        <div class="row-fluid">
                                Select the XLS file to upload
                                <div class="col-md-4 p-a-5">
                                        <input type="file" class="filestyle" name="fileToUpload" id="fileToUpload" data-input="false">  

                                </div>
                                <div class="col-md-4 p-a-5">
                                        <input type="submit" class="btn btn-primary" value="Upload File" name="submit">
                                </div>
                        </div>
                </div>

        </form>
</div>

</body>
</html>

我还尝试了一个带有glyphicon的bootstrap上传按钮，用于文件上传。那也行不通。

Answer 1

您好我尝试使用chrome打开，我确实看到了上传按钮，一切似乎都很好。

Answer 2

如果您将头改为：

，则存在一些问题

<title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-filestyle/1.2.1/bootstrap-filestyle.js"></script>

Bootstrap需要jQuery，同时查看可以使用早期版本的Bootstrap的示例，Bootstrap 4正在开发中。我建议使用稳定版本。然后，您需要添加.m-b-5的样式，我想这将是.m-b-5{margin-bottom: .5em;}等等

上传按钮未按预期显示，填充/边距无效

2 个答案: