Bootstrap 3堆棧圖像在同一行

我想將圖像堆疊在所有文本的頂部，同一行上的圖像與一些文本。Bootstrap 3堆棧圖像在同一行

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <!-- jquery --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
    <!-- jquery ui --> 
 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 

 
    <!-- bootstrap --> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td rowspan='6'> 
 
      <img src="http://www.google.com/search?q=professor&rlz=1C5CHFA_enUS699US707&espv=2&biw=1280&bih=703&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiUn_nPgJ3QAhUO7WMKHZjDD_oQ_AUIBigB#imgrc=MR0mBgD1-8vtJM%3A" height='170' width='170' style='padding-left: 30px;'/> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Bob</td> 
 
     </tr> 
 
     <tr><td>[email protected]</td></tr> 
 
     <tr><td>23</td></tr> 
 
     <tr><td>Contact</td></tr> 
 
     <tr><td>Party</td></tr> 
 
     <tr><th>Start Term</th><td>2016.01.01</td></tr> 
 
     <tr><th>End Term</th><td>2016.01.01</td></tr> 
 
     <tr><th>Term</th><td>today</td></tr> 
 
     <tr><th>Office</th><td>here</td></tr> 
 
     <tr><th>State</th><td>CA</td></tr> 
 
     <tr><th>Fax</th><td>here</td></tr> 
 
     <tr><th>Birthday</th><td>today</td></tr> 
 
     <tr><th>Social Links</th><td>here</td></tr> 
 
    </tbody> 
 
    </table> 
 
    </body> 
 

 
</html>

請看看我的代碼在行動在： https://plnkr.co/edit/YgcNPhX8hc4HnNgZALBr?p=preview

棘手的部分是圖像是行中：至極需6個TDS成一個，我想使用bootstrap3將其堆疊在所有內容之上。

請參考圖片，看看我說的是：

前：

後：

預先感謝您的傢伙！

來源

2016-11-10 DawnZHANG

定義一切！ - 在頁面頂部？在桌子上面？在行的頂部？ - 附註：使用表格數據，div使用佈局 – ochi

你想使用BS？去做。刪除rowspan，並把col-xs-6左右。 –

我按照您的要求編輯了plunker鏈接。我沒有帳戶，所以我的代碼不會保存在鏈接上。以下是供您參考的代碼：

<!DOCTYPE html> 
<html> 
<style type = "text/css"> 

    table{ 
    width:100%; 
    height:100%; 
    align:center; 
    text-align:center; 
    } 

    img{ 
    align:center; 
    background-size:cover; 
    } 

    tbody{ 
    align:left; 
    text-align:left; 
    } 

</style> 
    <head> 
    <!-- jquery --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

    <!-- jquery ui --> 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 

    <!-- bootstrap --> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <table> 
    <thead> 
     <tr> 
     <td> 
      <img src="http://www.google.com/search?q=professor&rlz=1C5CHFA_enUS699US707&espv=2&biw=1280&bih=703&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiUn_nPgJ3QAhUO7WMKHZjDD_oQ_AUIBigB#imgrc=MR0mBgD1-8vtJM%3A" height='170' width='170' style='padding-left: 30px;'/> 
     </td> 
     </tr> 
     <tr><td>Bob</td></tr> 
     <tr><td>[email protected]</td></tr> 
     <tr><td>23</td></tr> 
     <tr><td>Contact</td></tr> 
     <tr><td>Party</td></tr> 
     </thead> 
     <tbody> 
     <tr><th>Start Term</th><td>2016.01.01</td></tr> 
     <tr><th>End Term</th><td>2016.01.01</td></tr> 
     <tr><th>Term</th><td>today</td></tr> 
     <tr><th>Office</th><td>here</td></tr> 
     <tr><th>State</th><td>CA</td></tr> 
     <tr><th>Fax</th><td>here</td></tr> 
     <tr><th>Birthday</th><td>today</td></tr> 
     <tr><th>Social Links</th><td>here</td></tr> 
    </tbody> 
    </table> 
    </body> 

</html>

我添加了css樣式選擇器以獲得該效果。從img td中刪除rowspan屬性。您不應該需要6 td才能從圖像中獲得理想的效果。您可以將它連續放入一個td，並應用background-size:cover屬性將圖像按比例拉伸成一行。

來源

2016-11-10 13:50:44 Fabulous

我不知道你的表格在你的html上面發生了什麼，這根本就不是bootstrap。不過，這裏是你需要實現這個佈局在它的最簡單的形式是什麼：

https://plnkr.co/edit/yK4MSDMA63P1n0roSgAW?p=preview

的HTML看起來像這樣。它基本上是2行內容。第一行被分成2個div，當瀏覽器的視口很小時，這兩個網格將佔用12個（全寬）網格位置，而在中等或更大時（這是col-md-6類所做的），則會佔用6個網格位置。第二行有一個類col-xs-12列的div，這意味着即使在最小（手機）尺寸的情況下，它也會佔用全部寬度。這應該讓你開始。

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6"> 
     <img src="http://c7.nrostatic.com/sites/default/files/uploaded/donald-trump-bankruptcy-lies-r.jpg" style="width:200px; height:200px;"/></div> 
    <div class="col-md-6"><p>Bacon ipsum dolor amet pancetta jowl filet mignon capicola ball tip jerky. Capicola t-bone filet mignon ball tip pork loin beef ribs bresaola pancetta shank biltong andouille porchetta ham hock short loin pastrami. Meatball frankfurter leberkas tenderloin brisket sausage salami ribeye ham ham hock andouille rump venison bacon. Drumstick tri-tip shoulder pork chop kielbasa tenderloin sausage prosciutto short ribs frankfurter hamburger t-bone chuck. Turducken pig meatloaf, meatball swine short ribs t-bone jerky. Strip steak cow boudin, sirloin leberkas pork chop frankfurter t-bone jowl rump tri-tip alcatra. Prosciutto meatball salami picanha pig.</p></div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-12"> 
     <p>Bacon ipsum dolor amet pancetta jowl filet mignon capicola ball tip jerky. Capicola t-bone filet mignon ball tip pork loin beef ribs bresaola pancetta shank biltong andouille porchetta ham hock short loin pastrami. Meatball frankfurter leberkas tenderloin brisket sausage salami ribeye ham ham hock andouille rump venison bacon. Drumstick tri-tip shoulder pork chop kielbasa tenderloin sausage prosciutto short ribs frankfurter hamburger t-bone chuck. Turducken pig meatloaf, meatball swine short ribs t-bone jerky. Strip steak cow boudin, sirloin leberkas pork chop frankfurter t-bone jowl rump tri-tip alcatra. Prosciutto meatball salami picanha pig.</p> 
    </div> 
    </div> 
</div>

來源

2016-11-10 02:19:16

我之所以沒有自舉代碼，是因爲當我有這些代碼時，我得到了我想要的iphone響應行爲，但它無法在桌面上保持原始佈局。 – DawnZHANG

@DawnZHANG好吧，我不知道你想要什麼。上面的代碼可以在你的圖像中完成你所需要的。如果你想改變堆疊的窗口尺寸，你可以改變col類，例如'col-sm-6'會保持最上面的一行被拆分成較小的尺寸，'col-lg-6'會使它更早堆疊。祝你好運。 –

Bootstrap 3堆棧圖像在同一行

回答

相關問題