Bootstrap Profile Card

Question

Я пытаюсь создать карточку профиля в Bootstrap 3, и у меня возникли проблемы с вложением изображения в карточку. Я думаю, что я могу сделать это проще, если я привяжусь к изображению в css, но у меня много профильных карт со всеми разными людьми, поэтому я думаю, что в этом случае лучше поддерживать ссылку на изображение в HTML.

Вот как я хотел бы это:

и вот где я нахожусь: http://jsfiddle.net/L3789n7u/1/

Любая помощь очень ценится. Благодаря!

~ Тони

<div class="container"> 
    <div class="row"> 
     <div class="people-cards"> 
      <div class="col-md-6"> 
       <div class="well"> 
        <div class="profile-image"> 
         <img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg"> 
          <div class="card-info"> 
        <h3 div class="company">Company Name</h3> 

        <h4 div class="name">Person Name</h4> 
        <h5 div class="title">Job Title</h5> 
        </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Как всегда у вас есть несколько вариантов, вот пример одного из них.

<div class="container"> 
    <div class="row"> 
     <div class="people-cards"> 
      <div class="col-md-6" style="border: 1px solid black;"> 
       <div class="row"> 
        <div class="profile-image" style="float:left;"> 
         <img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg" /> 
        </div> 
        <div class="profile-info"> 
         <h3 div class="company">Company Name</h3> 
         <h4 div class="name">Person Name</h4> 
         <h5 div class="title">Job Title</h5> 
        </div> 
        <div class="profile-link"> 
         <a href="">VIEW PROFILE</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

В принципе, вам нужно сделать изображение профиля влево, так что рядом с ним появится другой контент. Также потому, что ваш пример, как вы хотите, содержит границу вокруг карты, вам нужно обернуть изображение, информацию и ссылку в строке. Если вы хотите настроить размер изображения, вы можете использовать все файлы Bootstrap col-size-number.

Working example on JSFiddle