Bootstrap：跨越圖像中的多行跨越圖像

Question

我有一個關於嘗試跨水平Bootstrap窗體中的多行跨越圖像的問題。當前情況如下圖所示： 但是，我希望左側的配置文件圖像跨越輸入字段的多行。現在，由於某種原因，它將第二個輸入字段向下推，並且我似乎無法理解它。我還沒有真正體驗過這一切。所以我有點卡住了。我似乎發現的所有解決方案都針對自舉網格系統，並不適用於Bootstrap表單。有沒有其他人有這方面的經驗或有一個想法如何做到這一點？當前的代碼片段可以在下面找到。提前致謝！

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