모든 패널 요소를 왼쪽 정렬 CSS 및 부트 스트랩 트위터

Question

이미지 근처에있는 패널 요소 (이름 및 전자 메일)를 정렬하려고 시도했지만 작동하지 않아 다른 패널이 엉망입니다. 여기 Bootply

의 링크이며, 여기에 사용하여 코드 메신저입니다 : u는 어떤 설명이 필요하면

<div class="col-md-9"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 style=";text-align:center;font-family: 'Ubuntu', sans-serif;font-weight:500;">PROFILE</h4> 
      </div> 
      <div class="panel-body"> 
       <h4 style="font-family: 'Ubuntu', sans-serif;font-weight:500;margin-bottom:-15px;text-align:center;">TEST</h4> 
       <hr> 
        <img src="administrata/.jpg" class="thumbnail" style="height:100px; "> 
        <p style="">Name Surname</p> 
        <ul><li><p>E - mail: <a href="mailto:mail@mail.com">email@here.com</a></p></li></ul> 
       <hr> 
      </div> 

      <div class="panel-body"> 
       <h4 style="font-family: 'Ubuntu', sans-serif;font-weight:500;margin-bottom:-15px;text-align:center;">TEST</h4> 
       <hr> 
        <img src="administrata/.jpg" class="thumbnail" style="height:100px; "> 
        <p style="">Name Surname</p> 
        <ul><li><p>E - mail: <a href="mailto:mail@mail.com">email@here.com</a></p></li></ul> 
       <hr> 
      </div> 
     </div> 
    </div> 

가 말해이.

편집 :이 코드는하지만, 늘 도움 tryed 한

:

<div class="panel-body"> 
       <h4 style="font-family: 'Ubuntu', sans-serif;font-weight:500;margin-bottom:-15px;text-align:center;">TEST</h4> 
       <hr> 
       <img src="administrata/.jpg" class="thumbnail" style="height:100px;float:left "> 
        <p style="float:left">Name Surname</p> 
       <ul style="float:left"><li><p>E - mail: <a href="mailto:mail@mail.com">email@here.com</a></p></li></ul> 
       <hr> 
      </div> 

Answer 1

을 당신 부트 스트랩 트위터 그래서 당신은 DIV Address는 Indise (COL-MD-12)를 쓸 수 있으며 2 DIV 쓰기 내부에 사용 (col-md-6) col-md-6 또는 원하는 크기를 선택하십시오.

<hr> 
    <div class="col-md-12"> 
     <div class="col-md-6"><img src="administrata/.jpg" class="thumbnail" style="height:100px; "></div> 
     <div class="col-md-6"> 
       <p style="">Name Surname</p> 
       <ul><li><p>E - mail: <a href="mailto:mail@mail.com">email@here.com</a></p></li></ul>   </div> 
       </div> 
<hr> 

Answer 2

당신은 다음과 같이 그 다음 부트 스트랩

의 미디어 객체

<div class="media"> 
    <a class="pull-left" href="#"> 
    <img class="media-object" src="..." alt="..."> 
</a> 
<div class="media-body"> 
    <h4 class="media-heading">Media heading</h4> 
    ... 
</div> 
</div> 

를 사용할 수 있습니다

<div class="panel-body"> 
       <h4 style="font-family: 'Ubuntu', sans-serif;font-weight:500;margin-bottom:-15px;text-align:center;">TEST</h4> 
       <hr> 
        <div class="media"> 
         <a class="pull-left" href="#"> 
         <img src="administrata/.jpg" class="thumbnail" style="height:100px; "> 
         </a> 
         <div class="media-body"> 
         <h4 class="media-heading">Name Surname</h4> 
         <ul><li><p>E - mail: <a href="mailto:mail@mail.com">email@here.com</a></p></li></ul> 
         </div> 
        </div> 
       <hr> 
      </div> 

      <div class="panel-body"> 
       <h4 style="font-family: 'Ubuntu', sans-serif;font-weight:500;margin-bottom:-15px;text-align:center;">TEST</h4> 
       <hr> 
        <div class="media"> 
         <a class="pull-left" href="#"> 
         <img src="administrata/.jpg" class="thumbnail" style="height:100px; "> 
         </a> 
         <div class="media-body"> 
         <h4 class="media-heading">Name Surname</h4> 
         <ul><li><p>E - mail: <a href="mailto:mail@mail.com">email@here.com</a></p></li></ul> 
         </div> 
        </div> 
       <hr> 
      </div>