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>

我想我明白了，但它似乎有点臃肿。有没有更优雅的方式？ 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

Bootstrap配置文件卡

相关推荐