2016-09-26 5 views
0

자습서를 따라 왔지만 여백/여백이 효과적이지 않습니다. 파일 업로드 아이콘이 표시되지 않습니다. 제발 좀 해보고 해결책을 제안 할 수 있니? 업로드 버튼이 예상대로 표시되지 않습니다. 여백/여백이 유효하지 않습니다.

은 여기에서 파일 업로드 스크립트와 샘플을했다 : http://markusslima.github.io/bootstrap-filestyle/

http://codepen.io/monajalal/pen/GjmQzv

<!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으로 부트 스트랩 업로드 버튼을 시도했다. 그것도 작동하지 않았다.

답변

0

안녕하세요, 저는 크롬으로 열어 보았습니다. 업로드 버튼이 보이고 모든 것이 제대로 작동하는 것 같습니다. 

enter image description here

+0

하지만 당신은 –

+0

또한 패딩뿐만 아니라 –

+0

당신을 위해 당신이 할 수 작동하지 않는 파일 아이콘과 같은 버튼의 아이콘이 표시되지 않습니다 네가보기를 원하는 이미지를 최소한 보여줘? –

0

몇 가지 문제가 당신이 머리를 변경하는 경우가 있습니다

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

부트 스트랩 jQuery를, 또한 부트 스트랩, 부트 스트랩의 이전 버전을 사용할 수있는 예제를보고 필요 4가 개발 중이다. 안정 버전을 사용하는 것이 좋습니다. 것 당신은 내가 상상 .m-b-5에 대한 스타일을 추가 할 필요가 .m-b-5{margin-bottom: .5em;} 등 등

관련 문제