Bootstrap配置文件卡

我試圖在Bootstrap 3中創建配置文件卡，並且無法將圖像放入卡中。如果我鏈接到css中的圖像，我想我可以做到這一點更容易，但我有許多配置文件卡與所有不同的人，所以我認爲保持圖像鏈接在HTML是更好的在這種情況下。Bootstrap配置文件卡

以下是我想它：

和這裏的我在哪裏：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>

來源

2015-11-08 Tony

我想我明白了，但它似乎有點臃腫。有沒有更優雅的方式？ http://www.bootply.com/COzGqZWCBY – Tony

與以往一樣，你有多種選擇，我這裏是其中之一。

<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

來源

2015-11-08 12:18:33

Bootstrap配置文件卡

回答

相關問題