Table Alert Divs上的Bootstrap相同高度？

时间：2015-12-02 13:52:50

标签： css twitter-bootstrap

在研究这个方面遇到了一些麻烦，也许我只是没有想清楚。我正在使用Bootstrap 3并有一个表来提取数据，我用它们的Alert样式div来突出显示某些数据。

我遇到的问题是，根据数据，它们都有不同的高度，我希望它们都是相同的。我见过其他例子，但他们没有使用表结构。

有没有办法做到这一点，还是我唯一的选择就是抛弃桌子并做单独的自举列？

附件是表格行的示例。enter image description here

3 个答案:

答案 0 :(得分：1)

我已更新了您的fiddle。我假设您在每个行中都有提醒，因此我们会遍历每个grep -C N 'abc de .*' valueinfile并找到<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- Tab Title In Window--> <title>GKN BI/IT PVD Notice Board</title> <!-- CSS Style--> <style type="text/css"> body { margin:0;padding:0;font-family: Sans-Serif;line-height: 1.5em;} header {background: #FFFFFF;height: 100px;} header h1 {margin: 0;padding-top: 15px;} main {padding-bottom: 10010px;margin-bottom: -10000px;float: left;width: 100%;} nav {padding-bottom: 10010px; margin-bottom: -10000px;float: left;width: 230px; margin-left: -230px;background: #FFFFFF;} footer{ clear: left;width: 100%;background: #FACC2E;text-align: center;padding: 0px 0;} #wrapper {overflow: hidden;} <!--Same as 'nav' width --> #content {margin-right: 230px; } <!-- Padding for content --> .innertube {margin: 15px;margin-top: 0; height: 200%; width: 200%;} p {color: #555;} nav ul {list-style-type: none;margin: 0;padding: 0;} nav ul a {color: #336699;text-decoration: none;} </style> </head> <!--Web banner--> <header> <center-left> <table width="875" align="left" cellpadding="0" cellspacing="0"> <tr> <td> <img src="Images/bi_it_banner.png"> </td> </tr> <!--Web banner 2--> <tr> <td> <img src="Images/background.jpg"> </td> </tr> </table> </header> <body> <div id="wrapper"> <main> <!--Title and iFrame Cycle--> <div id="content"> <div class="innertube"> <h1>Current Projects</h1> <br> <br> <!--iFrame--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> var sites = [ "http://ourspace.gkn/drivelive/", "http://ishare.driveline.gkn.com/SitePages/Home.aspx", "https://idash.driveline.gkn.com/josso/signon/login.do?josso_back_to=http://idash.driveline.gkn.com/applicationOverview/josso_security_check&josso_partnerapp_id=applicationOverview" ]; var currentSite = sites.length; $(document).ready(function () { var $iframe = $("iframe").attr("src","http://www.google.com"); setInterval(function() { (currentSite == 0) ? currentSite = sites.length - 1 : currentSite = currentSite -1; $iframe.attr("src",sites[currentSite]); }, 7000); }); </script> <style type="text/css" media="screen"> iframe { height: 200%; width: 100%; border: none; } </style> <br> <iframe></iframe> <br> </div> </div> </main> <!-- Code for Navigation Bar and Time&Date --> <nav> <div class="innertube"> <!--Time/Date Function--> <center> <table width="200" align="left" cellpadding="0" cellspacing="0"> <script type="text/javascript"> <!--Date--> var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December"); function GetClock(){ var d=new Date(); var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(); if(nyear<1000) nyear+=1900; <!--Time--> var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(); if(nmin<=9) nmin="0"+nmin if(nsec<=9) nsec="0"+nsec; document.getElementById('clockbox').innerHTML=""+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+""; } <!--Load into webpage and carry out function above--> window.onload=function(){ GetClock(); setInterval(GetClock,1000); } </script> <div id="clockbox"></div> <h3>GKN Sites</h3> <ul> <li><a target="_blank" href="http://ourspace.gkn/drivelive/">Drivelive</a></li> <li><a target="_blank" href="http://ishare.driveline.gkn.com/IT/SitePages/Home.aspx">BI/IT iShare</a></li> <li><a target="_blank" href="">Others?</a></li> </ul> <h3>Suggested Reading</h3> <ul> <li><a target="_blank" href="#">Link 1</a></li> <li><a target="_blank" href="#">Link 2</a></li> <li><a target="_blank" href="#">Link 3</a></li> <li><a target="_blank" href="#">Link 4</a></li> <li><a target="_blank" href="#">Link 5</a></li> </ul> <h3>External News</h3> <ul> <li><a target="_blank" href="http://www.bbc.co.uk/news">BBC News</a></li> <li><a target="_blank" href="http://www.bbc.co.uk/travel">BBC Travel</a></li> <li><a target="_blank" href="http://www.bbc.co.uk/weather/">BBC Weather</a></li> </ul> </div> </nav> </div> </table> <!-- End of code for Navigation Bar --> <footer> <div class="innertube"> <marquee><img src="Images/GKN.svg.png" height="25" width="60"> Hopefully feed text from text file here</marquee> </div> </footer> </body> </html> div，然后确定哪个提醒最多＆＃34 ;高度＆＃34 ;.然后，我们将此<tr> CSS添加到行中的每个.alert。

HTML结构已更改，我已添加height和.alert 

<thead>

答案 1 :(得分：0)

只需为“alert”类添加自定义css，它就会应用于所有警报类型，例如：

.alert {
   height: 90px
}

https://jsfiddle.net/W3AVE/4j72mfeo/

答案 2 :(得分：0)

HTML 

<table>
  <tr class='same-height'>
    <td><div><span>text</span></div></td>
    <td><div><span>some long text here</span></div></td>
    <td><div><span>text medium</span></div></td>
  </tr>
</table>

CSS 

div {
  border: 1px solid black;
}

span {
  text-align: center;
  display: block;
  position: relative;
  top: 50%;
  transform: translate(0, -50%)
}

JS 

(function($){

  var $el   = $(".same-height"),
      h     = $el.height();

  $el.find("div").each(function()
  {
    var $self = $(this);
    $self.css({"height": h});
  });

}(jQuery));
相关问题
最新问题