부트 스트랩 : 이미지가 여러 행에 걸쳐 형태로 표시됩니다.

Question

가로 부트 스트랩 양식에서 여러 행으로 이미지를 스패닝하는 것과 관련하여 질문이 있습니다. 현재 상황은 다음 그림과 같습니다. 그러나 왼쪽의 프로필 이미지를 입력 필드의 여러 행으로 확장하고 싶습니다. 이제는 두 번째 입력 필드를 어떤 이유로 든 푸시 다운합니다. 그럴 수는 없습니다. 나는 아직이 모든 것을 경험하지 못했습니다. 그래서 나는 꼼짝 못한다. 찾을 수있는 모든 솔루션은 부트 스트랩 그리드 시스템을 대상으로하며 부트 스트랩 양식에만 적용 가능하지 않습니다. 다른 사람이이 경험이 있거나 이것을하는 방법을 알고 있습니까? 현재 코드 스 니펫은 아래에서 찾을 수 있습니다. 미리 감사드립니다!

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

그리고 관련 CSS 클래스 :

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

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

편집 : 코드에 너무 많은 부모 <div>

Answer 1

에 지금까지 내가 이해 귀하의 문제는 아래의 스 니펫처럼 보이게됩니다. 그것은 어떤 rerasons에 대한 당신의 소원을 실패하면 주석 -은 첫 번째 인스턴스에서 작동하는 것 같다하지만 나는 대답

.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

col-sm-10 클래스를 추가해보십시오 당신의 form