Bootstrap: Span Bild über mehrere Zeilen im Formular

Question

Ich habe eine Frage bezüglich des Versuches, ein Bild über mehrere Zeilen in einem horizontalen Bootstrap-Formular zu überspannen. Die aktuelle Situation ist wie in diesem Bild unten: Allerdings möchte ich das Profilbild auf der linken Seite über mehrere Zeilen des Eingabefelds erstrecken. Jetzt schiebt es das zweite Eingabefeld aus irgendeinem Grund nach unten, und ich kann mich nicht darum kümmern. Mit all dem bin ich noch nicht wirklich erfahren. Also bin ich irgendwie festgefahren. Alle Lösungen, die ich finde, zielen auf das Bootstrap-Grid-System ab und sind nicht wirklich anwendbar und spezifisch für das Bootstrap-Formular. Hat sonst jemand Erfahrung damit oder hat er eine Idee, wie das geht? Das aktuelle Code-Snippet finden Sie unten. Danke im Voraus!

<!-- Basic information --> 
<h4>Algemeen</h4> 
<img src="./img/profile-edit.png" class="col-sm-2 img-profile-edit col-profile"></img> 
<form class="form-horizontal"> 
    <div class="form-group form-group-sm"> 
    <label for="name" class="col-sm-3">Voornaam:</label> 
    <div class="col-sm-6"> 
     <input type="text" class="form-control" id="name"> 
    </div> 
    </div> 
    <div class="form-group form-group-sm "> 
    <label for="surname" class="col-sm-3">Achternaam:</label> 
    <div class="col-sm-6"> 
     <input type="text" class="form-control" id="surname"> 
    </div> 
    </div> 
    <div class="form-group form-group-sm"> 
    <label for="gender" class="col-sm-3">Geslacht:</label> 
    <div class="col-sm-6" id="gender"> 
     <label class="radio-inline"><input type="radio" name="optman">Man</label> 
     <label class="radio-inline"><input type="radio" name="optwomen">Vrouw</label> 
    </div> 
    </div> 
    <div class="form-group form-group-sm"> 
    <label for="dob" class="col-sm-3">Geboortedatum:</label> 
    <div class="col-sm-6"> 
     <input type="date" format="dd/MM/yyyy" class="form-control" id="dob"> 
    </div> 
    </div> 
</form> 

Und die entsprechenden CSS-Klassen:

.img-profile-edit { 
    border-radius:15%; 
    overflow:hidden; 
} 

@media (min-width: 768px) { 
    .col-profile { 
     float: right; 
     padding: 0 5px; 
    } 
} 

EDIT: Parent <div> zu viel in Code-Schnipsel

Answer 1

Soweit ich verstehe das Hinzufügen Ihr Problem sieht aus wie ein Ausschnitt unten. Wenn es Ihre Wünsche für einige rerasons versagt, Kommentar - ich werde versuchen, eine Antwort

.img-profile-edit { 
 
    border-radius:15%; 
 
    overflow:hidden; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .col-profile { 
 
     float: right; 
 
     padding: 0 5px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<h4>Algemeen</h4> 
 
<div class="col-sm-10"> 
 
<form class="form-horizontal"> 
 
    <div class="form-group form-group-sm"> 
 
    <div class="form-group form-group-sm"> 
 
     <label for="name" class="col-sm-3">Voornaam:</label> 
 
     <div class="col-sm-6"> 
 
     <input type="text" class="form-control" id="name"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group form-group-sm "> 
 
     <label for="surname" class="col-sm-3">Achternaam:</label> 
 
     <div class="col-sm-6"> 
 
     <input type="text" class="form-control" id="surname"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group form-group-sm"> 
 
     <label for="gender" class="col-sm-3">Geslacht:</label> 
 
     <div class="col-sm-6" id="gender"> 
 
     <label class="radio-inline"><input type="radio" name="optman">Man</label> 
 
     <label class="radio-inline"><input type="radio" name="optwomen">Vrouw</label> 
 
     </div> 
 
    </div> 
 
    <div class="form-group form-group-sm"> 
 
     <label for="dob" class="col-sm-3">Geboortedatum:</label> 
 
     <div class="col-sm-6"> 
 
     <input type="date" format="dd/MM/yyyy" class="form-control" id="dob"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form> 
 
</div> 
 
<div class="col-sm-2"> 
 
<img src="http://placehold.it/200x200" class="img-profile-edit col-profile"> 
 
</div>

Answer 2

Versuchen Sie, eine col-sm-10 Klasse Ihren form