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堆栈图像在同一行

回答

相关问题