ein Element Setzen Sie neben einem <input type = „file“> Element

Ich habe dieses HTML:ein Element Setzen Sie neben einem <input type = „file“> Element

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

Aber die submit Schaltfläche unter dem fileupload Elemente gerendert wird, aber ich will es auf der rechten Seite von es. Wenn ich Bootstrap deaktiviere, funktioniert es. Wie kann ich Informationen neben dem Dateibrowser erhalten?

Quelle

2016-07-01 Bart Friederichs

Bootstrap macht die Schaltfläche zum Hochladen der Datei zu einem Block, wodurch der gesamte Platz und die Schaltflächen nicht nebeneinander ausgerichtet werden müssen.

Sie könnten global festlegen, dass die Eingabetypdatei als inline-block angezeigt wird, damit sie nebeneinander ausgerichtet werden können.

Oder Sie könnten natürlich geben diese bestimmte Datei Upload-Button eine Klasse und deklarieren CSS nur dafür.

Fiddle: https://jsfiddle.net/pozh7cj3/2/

Quelle

2016-07-01 12:05:24 thepio

Bootstrap kann helfen, von table designed Seiten loszuwerden.

So können Sie Ihre Form wie folgt schreiben:

<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* Klassen das benötigte Ergebnis mit dem kleinen Ansichtsfenster von Code-Schnipsel haben, verwendet werden)

Quelle

2016-07-01 12:11:50

ein Element Setzen Sie neben einem <input type = „file“> Element

Antwort

Verwandte Themen