使用引導3風格/佈局用戶摘要框

Question

我試圖用TB3完成一個（相當）簡單的佈局，我有一些困難。

我試圖創建可重複的箱子，我稱之爲「用戶摘要」，其中每個彙總盒的樣子：

其中：

• 在空方盒子左邊是用戶的照片
• 頂部矩形是用戶的顯示名稱（「DonaldDoo」）
• 底部的矩形是用戶的描述（「夢想着十幾個甜甜圈。「）

注：我不是在這裏尋找實際的邊界（無黑色邊框），上面僅僅是圖形有助於描繪我追求的佈局

不管怎麼說，這是我最好的嘗試這樣。遠：？

<div class="container"> 
    <div class="well"> 
     <div> 
      <img src="user_photo_here.png" /> 
      <i>DonaldDoo</i> 
      <b>Dreamed a dozen donuts.</b> 
     </div> 
     <div> 
      <img src="another_user_photo.png" /> 
      <i>WalterWiggins2000</i> 
      <b>Washes Waldo Woo.</b> 
     </div> 
    </div> 
</div> 

然而，這並不正確，我要去哪裏出錯顯示任何想法

Answer 1

我想這將滿足您的要求，我把它換成了<b>和<i>標籤與<div>和分配給他們的類。

看看這段代碼。

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
div.user-summary { 
 
    margin: 10px auto; 
 
} 
 
div.user-summary > img { 
 
    width: 80px; 
 
    height: 80px; 
 
    float: left; 
 
    margin: 0 5px; 
 
} 
 
div.user-name { 
 
    margin: 15px 0 0 0; 
 
    font-style: italic; 
 
    display: block; 
 
} 
 
div.user-status { 
 
    font-weight: bold; 
 
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="well"> 
 
    <div class="user-summary clearfix"> 
 
     <img src="https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg" /> 
 
     <div class="user-name">DonaldDoo</div> 
 
     <div class="user-status">Dreamed a dozen donuts</div> 
 
    </div> 
 
    <div class="user-summary clearfix"> 
 
     <img src="https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg" /> 
 
     <div class="user-name">WalterWiggins2000</div> 
 
     <div class="user-status">Washes Waldo Woo.</div> 
 
    </div> 
 
    </div> 
 
</div>